How to properly configure ckeditor5 in Nuxt?

Question

For the first time I came across the CkEditor5 setting in Nuxt js and a lot is not clear and many errors have flown.

Trying to customize my version of ckeditor5 in nuxt.js by This instruction

but nothing works, in the console it gives

Cannot use import statement outside a module

Tell me how to properly set up a custom editor so that you can load both the code editor and html there

My nuxt.js.config

const path = require('path')
        const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin')
        const { styles } = require('@ckeditor/ckeditor5-dev-utils')

        export default {

          // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
          plugins: [
            { src: '~/plugins/vue-ckeditor.js', mode: 'client' },
          ],

        build: {
            plugins: [
              new CKEditorWebpackPlugin({
                // See https://ckeditor.com/docs/ckeditor5/latest/features/ui-language.html
                language: 'ru'
              })
            ],
            module: {
              rules: [
                {
                  test: /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
                  use: ['raw-loader']
                },
                {
                  test: /ckeditor5-[^/\\]+[/\\]theme[/\\].+\.css$/,
                  use: [
                    {
                      loader: 'style-loader',
                      options: {
                        injectType: 'singletonStyleTag',
                        attributes: {
                          'data-cke': true
                        }
                      }
                    },
                    {
                      loader: 'postcss-loader',
                      options: styles.getPostCssConfig({
                        themeImporter: {
                          themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
                        },
                        minify: true
                      })
                    },
                  ]
                }
              ]
            }
          }

I call the module on the page like this

<script lang="ts">
import Vue from 'vue'
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor'

import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'
import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold'
import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic'
import LinkPlugin from '@ckeditor/ckeditor5-link/src/link'
import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'
export default Vue.extend({
  data() {
    return {
      editor: ClassicEditor,
      editorData: '<p>Content of the editor.</p>',
      editorConfig: {
        plugins: [
          EssentialsPlugin,
          BoldPlugin,
          ItalicPlugin,
          LinkPlugin,
          ParagraphPlugin,
        ],

        toolbar: {
          items: ['bold', 'italic', 'link', 'undo', 'redo'],
        },
      },
    }
  },
})
</script>

Answer 1

Seems you want to use CKEditor5 from source and using plugins.

I have the same problem and fixed it. The sample project is here.

The code snippet is below

• 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>