nuxt.js - 如何使用nuxt在vue中的ckeditor5中添加自定义工具栏按钮

Question

我尝试使用本指南将按钮作为插件添加到 ckeditor 工具栏，并创建了一个简单的插件。但我的代码有错误这是我尝试将按钮添加到ckeditor工具栏并返回错误的代码

[Vue warn]: Failed to resolve async component: function HelperCkeditorNuxt() {
    return Promise.all(/*! import() | components/helper-ckeditor-nuxt */[__webpack_require__.e("vendors/components/helper-ckeditor-nuxt/components/helper-my-custom-plugin"), __webpack_require__.e("vendors/components/helper-ckeditor-nuxt"), __webpack_require__.e("components/helper-ckeditor-nuxt")]).then(__webpack_require__.bind(null, /*! ../../components/helper/CkeditorNuxt.vue */ "./components/helper/CkeditorNuxt.vue")).then(function (c) {
      return Object(_utils__WEBPACK_IMPORTED_MODULE_4__["wrapFunctional"])(c.default || c);
    });
  }
Reason: CKEditorError: ckeditor-duplicated-modules

<template>
  <ckeditor
    :editor="editor"
    :value="value"
    :config="config"
    :tag-name="tagName"
    :disabled="disabled"
    @input="(event) => $emit('input', event)"
  />
</template>
<script>
let ClassicEditor
let CKEditor
let EssentialsPlugin
let BoldPlugin
let LinkPlugin
let MyCustomPlugin

if (process.client) {
  ClassicEditor = require('@ckeditor/ckeditor5-build-classic')
  CKEditor = require('@ckeditor/ckeditor5-vue2')
  EssentialsPlugin = require('@ckeditor/ckeditor5-essentials/src/essentials')
  BoldPlugin = require('@ckeditor/ckeditor5-basic-styles/src/bold')
  LinkPlugin = require('@ckeditor/ckeditor5-link/src/link')
  MyCustomPlugin = require('../helper/MyCustomPlugin')
} else {
  CKEditor = { component: { template: '<div></div>' } }
}

export default {
  components: {
    ckeditor: CKEditor.component,
  },
  props: {
    value: {
      type: String,
      required: false,
      default: '',
    },
    tagName: {
      type: String,
      required: false,
      default: 'div',
    },
    disabled: {
      type: Boolean,
      required: false,
    },
    uploadUrl: {
      type: String,
      required: false,
      default: '',
    },
    // config: {
    //   type: Object,
    //   required: false,
    //   default: function () {},
    // },
  },
  data() {
    return {
      editor: ClassicEditor,
      config: {
        plugins: [EssentialsPlugin, BoldPlugin, LinkPlugin],
        extraPlugins: [MyCustomPlugin],
        toolbar: {
          items: ['bold', 'link', 'myCustomPlugin'],
        },
      },
    }
  },
}
</script>

我的自定义插件

import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
import imageIcon from '@ckeditor/ckeditor5-core/theme/icons/image.svg';
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';

class MyCustomPlugin extends Plugin {
    init() {
        const editor = this.editor;

        editor.ui.componentFactory.add( 'myCustomPlugin', locale => {
            const view = new ButtonView( locale );

            view.set( {
                label: 'Insert image',
                icon: imageIcon,
                tooltip: true
            } );

            view.on( 'execute', () => {
                console.log('dispatch some event');
            } );

            return view;
        } );
    }
}

export default MyCustomPlugin;

我为 ckeditor package.json 安装了这个包，如下所示：

"@ckeditor/ckeditor5-build-classic": "^29.0.0",
"@ckeditor/ckeditor5-vue2": "^1.0.5",

这是我的错误图片

标签： nuxt.jsckeditor5