如何在 Vue.js 中添加 ckeditor 简单上传适配器/修复 CKEditorError: ckeditor-duplicated-modules

Question

我正在尝试在 Vue 中添加 CKEditor，它工作正常。现在我想添加在文本区域添加图像的功能，并且我尝试了如下所示的简单上传适配器，但它不起作用。带有编辑器的页面不显示，并且控制台中抛出以下错误

CKEditorError: ckeditor-duplicated-modules

。我该如何解决这个问题或者我错误地实施了它？

<template>
  <ckeditor
    :editor="editor"
    v-model="editorData"
    @ready="onReady"
    @input="onChange"
    :config="editorConfig"
  ></ckeditor>
</template>

<script>
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import CKEditor from "@ckeditor/ckeditor5-vue";
import SimpleUploadAdapter from "@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter";

export default {
  name: "app",
  components: {
    ckeditor: CKEditor.component,
  },
  data() {
    return {
      editor: ClassicEditor,
      editorData: "<p>Hello from CKEditor 5!</p>",

      editorConfig: {
        plugins: [SimpleUploadAdapter],
        toolbar: ["imageUpload", "image"],
        simpleUpload: {
          uploadUrl: "YOUR_UPLOAD_ENDPOINT_URL",
        },
      },
    };
  },
  methods: {
    onReady(editor) {
      console.log("CKEditor5 Vue Component is ready to use!", editor);
    },
    onChange(data) {
      console.log(data);
    },
  },
};
</script>

Answer 1

我认为你可以这样做：

<template>
  <ckeditor
    :editor="editor"
    v-model="editorData"
    @ready="onReady"
    @input="onChange"
    :config="editorConfig"
  ></ckeditor>
</template>

<script>
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import SimpleUploadAdapter from "@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter";

export default {
  name: "app",
  data() {
    return {
      editor: ClassicEditor,
      editorData: "<p>Hello from CKEditor 5!</p>",

      editorConfig: {
        plugins: [SimpleUploadAdapter],
        toolbar: ["imageUpload", "image"],
        simpleUpload: {
          uploadUrl: "YOUR_UPLOAD_ENDPOINT_URL",
        },
      },
    };
  },
  methods: {
    onReady(editor) {
      console.log("CKEditor5 Vue Component is ready to use!", editor);
    },
    onChange(data) {
      console.log(data);
    },
  },
};
</script>