CKEditorError: ckeditor-duplicated-modules

[TaoSun01]

import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
import ButtonView from "@ckeditor/ckeditor5-ui/src/button/buttonview";
as soon as I introduce these two, an error will be reported

master file

<template>
  <div>
    <ckeditor
      :editor="editor"
      v-model="editorData"
      :config="editorConfig"
    ></ckeditor>
  </div>
</template>

<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import CKEditor from "@ckeditor/ckeditor5-vue2";
import CustomButton from "./CustomButton"; // 引入自定义按钮插件

export default {
  components: {
    ckeditor: CKEditor.component,
  },
  data() {
    return {
      editor: ClassicEditor,
      editorData: "<p>Content of the editor.</p>",
      editorConfig: {
        toolbar: [
          "heading",
          "|",
          "bold",
          "italic",
          "|",
          "bulletedList",
          "numberedList",
          "|",
          "undo",
          "redo",
          "|",
          "customButton", // 这里是自定义按钮
        ],
        extraPlugins: [CustomButton],
      },
    };
  },
};
</script>

<style>
#app {
  margin: 20px;
}
</style>

plug-in

import Plugin from "@ckeditor/ckeditor5-core/src/plugin";
import ButtonView from "@ckeditor/ckeditor5-ui/src/button/buttonview";

export default class CustomButton extends Plugin {
  init() {
    const editor = this.editor;

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

      view.set({
        label: "Custom Button",
        withText: true,
        tooltip: true,
      });

      // 添加按钮的点击事件
      view.on("execute", () => {
        editor.model.change((writer) => {
          const insertPosition =
            editor.model.document.selection.getFirstPosition();
          writer.insertText("Custom Text", insertPosition);
        });
      });

      return view;
    });
  }
}