如何在Nuxt中正确配置ckeditor5？

Question

这是我第一次在Nuxt中遇到CkEditor5设置，很多都不清楚，很多错误已经飞了出来。

尝试自定义我的ckeditor5 in nuxt.js by 本指令

但是，在它给出的控制台中，什么都不起作用。

Cannot use import statement outside a module

告诉我如何正确设置自定义编辑器，以便您可以同时加载代码编辑器和html。

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

我像这样调用页面上的模块

<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

似乎你想从源代码和插件中使用CKEditor5。

我也有同样的问题并解决了。示例项目是这里。

代码片段如下

• 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"]
      })
    }
  }
}

• 组件/编辑器/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);

• 页/index.vue

<template>
  <client-only>
    <v-ckeditor v-model="text" />
  </client-only>
</template>

<script>
export default {
  data() {
    return {
      text: 'Hello World!!',
    }
  },
}
</script>