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

Question

我尝试将按钮作为插件添加到 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,
      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",

这是我的错误图片

Answer 1

function CustomButton(editor) {
  editor.ui.componentFactory.add('customButton', (locale) => {
    const view = new ButtonView(locale);
    view.set({
      label: 'Beauty json',
      withText: true,
      class: 'ck-button-format-json',
    });

    view.on('execute', () => {
      // action when button is clicked
    });

    return view;
  });
}

const configs = computed(() => {
  return {
    toolbar: ['undo', 'redo', 'customButton'],
    plugins: [Essentials, Heading, CustomButton],
  };
});

<template>
  <Ckeditor
    v-model="content"
    :config="configs"
  />
</template>

=> 这是您可能的解决方案