Using CKEditor 5 with nuxtjs

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

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"],
      }

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

try this

npm install --save @blowstack/ckeditor-nuxt