Using CKEditor 5 with nuxtjs - vue.js

Question

I'm trying to import a custom build of CKEditor 5 in my Nuxtjs project and I've been tried every possible way to import it correctly but none of them worked for me and this is one of them:
let ClassicEditor
let CKEditor
if (process.client) {
ClassicEditor = require('./../../static/js/ckeditor')
CKEditor = require('#ckeditor/ckeditor5-vue')
}else{
CKEditor = { component : {template:'<div></div>'}}
}
data() {
return {
editor: ClassicEditor,
}
}
components:{
ckeditor: CKEditor.component
},
<client-only><ckeditor :editor="editor" /></client-only>
Every time I change the way a different error appears, for example, Window is not Defined and when i use different way shows a different error so I want to know what is the most correct way to use CKEditor with Nuxtjs in universal mode, consider that i haven't done anything and help me with the correct way starting from the installation

Answer 1

try this
npm install --save #blowstack/ckeditor-nuxt

Answer 2

You can use by importing the package on client side.
Create Editor.vue components
<template>
<ckeditor
:editor="editor"
:config="editorConfig"
/>
</template>
<script>
let ClassicEditor
let CKEditor
if (process.client) {
ClassicEditor = require('#ckeditor/ckeditor5-build-classic')
CKEditor = require('#ckeditor/ckeditor5-vue2')
} else {
CKEditor = { component: { template: '<div></div>' } }
}
export default {
components: {
ckeditor: CKEditor.component
},
data () {
return {
editor: ClassicEditor,
editorConfig: {}
}
}
</script>
Usage:
<client-only placeholder="Loading Text Editor...">
<editor v-model="textInput"/>
</client-only>

Answer 3

window is not defined
If you set ssr: true in the nuxt.config.js and put your custom VCKEditor.vue into the components folder, the Nuxt will scan the components folder by Server Side and it doesn't know the window keyword which is the JavaScript object in #ckeditor/ckeditor5-vue2.
You can see more about components doc.
I don't like use the process.client to check ssr mode.
I have two solutions, just choose one
set components: false in the nuxt.config.js.
Move the your custom VCKEditor.vue to components folder outside.
Finally, register custom VCKEditor.vue as plugins and set plugins ssr: false in the nuxt.config.js.
Here is the sample project.
The code snippet
nuxt.config.js
const path = require('path')
const CKEditorWebpackPlugin = require("#ckeditor/ckeditor5-dev-webpack-plugin")
const CKEditorStyles = require("#ckeditor/ckeditor5-dev-utils").styles
export default {
// ignore other settings...
ssr: true,
// Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
plugins: [
{
src: '~/plugins/ckeditor.js', ssr: false
},
],
// set false to disable scan the components folder
components: false,
// Build Configuration: https://go.nuxtjs.dev/config-build
build: {
transpile: [/ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/],
plugins: [
// If you set ssr: true that will cause the following error. This error does not affect the operation.
// ERROR [CKEditorWebpackPlugin] Error: No translation has been found for the zh language.
new CKEditorWebpackPlugin({
// See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
language: "zh",
additionalLanguages: 'all',
addMainLanguageTranslationsToAllAssets: true,
})
],
// If you don't add postcss, the CKEditor css will not work.
postcss: CKEditorStyles.getPostCssConfig({
themeImporter: {
themePath: require.resolve("#ckeditor/ckeditor5-theme-lark")
},
minify: true
}),
extend(config, ctx) {
// If you do not exclude and use raw-loader to load svg, the following errors will be caused.
// Cannot read property 'getAttribute' of null
const svgRule = config.module.rules.find(item => {
return /svg/.test(item.test);
})
svgRule.exclude = [path.join(__dirname, 'node_modules', '#ckeditor')];
// add svg to load raw-loader
config.module.rules.push({
test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
use: ["raw-loader"]
})
}
}
}
components/editor/VCKEditor.vue
<template>
<ckeditor
v-model="editorData"
:editor="editor"
:config="editorConfig"
></ckeditor>
</template>
<script>
import CKEditor from '#ckeditor/ckeditor5-vue2'
import ClassicEditor from '#ckeditor/ckeditor5-editor-classic/src/classiceditor'
import Bold from '#ckeditor/ckeditor5-basic-styles/src/bold'
import Italic from '#ckeditor/ckeditor5-basic-styles/src/italic.js'
import Underline from '#ckeditor/ckeditor5-basic-styles/src/underline'
import Strikethrough from '#ckeditor/ckeditor5-basic-styles/src/strikethrough'
// less Heading + Essentials plugin can't input the text
import Heading from '#ckeditor/ckeditor5-heading/src/heading'
import Essentials from '#ckeditor/ckeditor5-essentials/src/essentials'
import ImageUpload from '#ckeditor/ckeditor5-image/src/imageupload'
import ImageInsert from '#ckeditor/ckeditor5-image/src/imageinsert'
import AutoImage from '#ckeditor/ckeditor5-image/src/autoimage'
import Image from '#ckeditor/ckeditor5-image/src/image'
import ImageResizeEditing from '#ckeditor/ckeditor5-image/src/imageresize/imageresizeediting'
import ImageResizeHandles from '#ckeditor/ckeditor5-image/src/imageresize/imageresizehandles'
import Base64UploadAdapter from '#ckeditor/ckeditor5-upload/src/adapters/base64uploadadapter'
export default {
name: 'VCKEditor',
components: { ckeditor: CKEditor.component },
props: {
value: {
type: String,
},
},
computed: {
editorData: {
get() {
return this.value
},
set(value) {
this.$emit('input', value)
},
},
},
data() {
return {
editor: ClassicEditor,
editorConfig: {
plugins: [
Bold,
Italic,
Underline,
Strikethrough,
Heading,
Essentials,
ImageUpload,
ImageInsert,
AutoImage,
Image,
ImageResizeEditing,
ImageResizeHandles,
Base64UploadAdapter,
],
toolbar: {
items: [
'heading',
'|',
'bold',
'italic',
'underline',
'strikethrough',
'|',
'insertImage',
],
},
language: 'zh',
},
}
},
}
</script>
plugins/ckeditor.js
import Vue from 'vue';
import VCKEditor from "../components/editor/VCKEditor.vue";
Vue.component('v-ckeditor', VCKEditor);
pages/index.vue
<template>
<client-only>
<v-ckeditor v-model="text" />
</client-only>
</template>
<script>
export default {
data() {
return {
text: 'Hello World!!',
}
},
}
</script>

Answer 4

Use #blowstack/ckeditor-nuxt package.
Here is editor config for uploader.
Use #blowstack/ckeditor-nuxt package.
Here is editor config for uploader.
editorConfig: {
simpleUpload: {
uploadUrl: `${process.env.apiUrl}/api/console/uploads/single_file`,
headers: {
authorization: `Bearer ${_.get(
this.$store,
"state.agency.global.token"
)}`,
},
},
removePlugins: ["Title"],
}
Response data from upload API like this:
{
url: ".../image.png"
}
Refs: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/deep-dive/upload-adapter.html#passing-additional-data-to-the-response
editorConfig: {
simpleUpload: {
uploadUrl: `${process.env.apiUrl}/api/console/uploads/single_file`,
headers: {
authorization: `Bearer ${_.get(
this.$store,
"state.agency.global.token"
)}`,
},
},
removePlugins: ["Title"],
}