如何在 Nuxt 中正确配置 ckeditor5？

如何解决如何在 Nuxt 中正确配置 ckeditor5？

我第一次遇到 Nuxt js 中的 ckeditor5 设置，很多地方不清楚，并且出现了很多错误。

尝试通过 This instruction

在 nuxt.js 中自定义我的 ckeditor5 版本

但没有任何作用，在控制台中它给出

Cannot use import statement outside a module

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

我的 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>