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

问题描述

我尝试将按钮作为插件添加到 ckeditor 工具栏使用这个 guide 并创建了一个简单的插件。但我的代码有错误这是我尝试将按钮添加到 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,default: 'div',disabled: {
      type: Boolean,uploadUrl: {
      type: String,// 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",

这是我的错误图片

enter image description here

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ckeditor5 nuxt.js