Vue.js中添加CKEditor Simple Upload Adapter及修复ckeditor-duplicated-modules错误

错误原因 #

你遇到的ckeditor-duplicated-modules错误，是因为直接使用了官方预编译的@ckeditor/ckeditor5-build-classic构建包，同时又单独引入了SimpleUploadAdapter模块，导致同一模块被重复加载——官方Classic构建包本身已经内置了SimpleUploadAdapter插件，手动在配置中添加该插件会触发模块重复冲突。

解决方案 #

方案一：使用官方预构建包（快速修复） #

无需额外引入SimpleUploadAdapter，直接移除配置中重复的插件声明，仅保留上传地址和工具栏配置即可：

修改后的完整代码：

<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";

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

      editorConfig: {
        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>

方案二：自定义构建CKEditor（适合扩展需求） #

如果需要添加官方预构建包没有的插件，可通过自定义构建解决模块冲突：

• 使用CKEditor在线构建工具，选择ClassicEditor作为基础，勾选需要的插件（包括SimpleUploadAdapter），下载构建后的包
• 将自定义构建包替换项目中@ckeditor/ckeditor5-build-classic的依赖
• 后续可在配置中正常管理插件，避免重复引入同一模块

额外检查 #

确保项目中没有同时引入不同版本的CKEditor依赖，或在多个组件中重复import同一模块，这也可能触发类似的重复模块错误。

内容的提问来源于stack exchange，提问作者Alphy Gacheru