MERN栈集成CKEditor5遇上传及模块重复错误的解决求助

一、修复ckeditor-duplicated-modules错误 #

该错误核心是重复导入CKEditor核心模块，比如混用官方预构建编辑器与自定义构建，或CKEditor相关包版本不一致。

场景1：使用自定义构建编辑器 #

1. 清理冲突依赖
   • 卸载所有官方CKEditor核心包（保留@ckeditor/ckeditor5-react即可）：

     npm uninstall @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-base64-upload-adapter @ckeditor/ckeditor5-core @ckeditor/ckeditor5-upload
     

   • 删除依赖缓存文件后重新安装：

     rm -rf node_modules package-lock.json
     npm install
     

2. 配置自定义构建依赖
   • 在项目package.json中添加本地自定义构建的依赖，路径需与你的构建文件夹匹配：

     "dependencies": {
       // ...其他依赖
       "ckeditor5-custom-build": "file:./ckeditor5-custom-build"
     }
     

   • 确保自定义构建的package.json中无重复的CKEditor核心依赖（构建时已打包所需插件）。
3. 正确导入编辑器
   • 仅引用自定义构建的Editor，避免同时导入官方预构建包：

     import { CKEditor } from '@ckeditor/ckeditor5-react';
     import Editor from 'ckeditor5-custom-build/build/ckeditor';
     

场景2：使用官方预构建Classic Editor #

1. 统一所有CKEditor包版本
   • 确保@ckeditor/ckeditor5-react、@ckeditor/ckeditor5-editor-classic及插件包版本完全一致，例如统一使用39.0.2：

     npm install @ckeditor/ckeditor5-react@39.0.2 @ckeditor/ckeditor5-editor-classic@39.0.2 @ckeditor/ckeditor5-base64-upload-adapter@39.0.2
     

2. 避免重复导入核心模块
   • 直接从编辑器源码导入，不单独引入核心包：

     import { CKEditor } from '@ckeditor/ckeditor5-react';
     import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
     import Base64UploadAdapter from '@ckeditor/ckeditor5-base64-upload-adapter/src/base64uploadadapter';
     

二、解决文件上传问题（filerepository-no-upload-adapter错误） #

方案1：使用Base64UploadAdapter（快速实现） #

在预构建编辑器中配置插件：

<CKEditor
  editor={ClassicEditor}
  config={{
    plugins: [Base64UploadAdapter], // 确保仅添加一次，无重复
    toolbar: [
      // 其他工具栏按钮
      'imageUpload' // 确保工具栏包含上传按钮
    ]
  }}
  onChange={(event, editor) => {
    const data = editor.getData();
    // 处理编辑器内容
  }}
/>

方案2：自定义上传适配器（适配MERN后端） #

自行实现后端上传逻辑，无需额外安装插件，避免版本冲突：

// 自定义上传适配器类
class CustomUploadAdapter {
  constructor(loader) {
    this.loader = loader;
  }

  // 实现上传逻辑
  upload() {
    return this.loader.file
      .then(file => new Promise((resolve, reject) => {
        const formData = new FormData();
        formData.append('image', file);

        // 调用MERN后端上传接口
        fetch('/api/blogs/upload-image', {
          method: 'POST',
          credentials: 'include', // 需身份验证时添加
          body: formData
        })
        .then(response => {
          if (!response.ok) throw new Error('上传失败');
          return response.json();
        })
        .then(data => {
          // 后端返回图片访问URL
          resolve({ default: data.imageUrl });
        })
        .catch(err => reject(err));
      }));
  }

  // 可选：实现取消上传逻辑
  abort() {
    // 添加取消请求的代码
  }
}

// 注册适配器插件
function CustomUploadAdapterPlugin(editor) {
  editor.plugins.get('FileRepository').createUploadAdapter = (loader) => {
    return new CustomUploadAdapter(loader);
  };
}

// 使用编辑器时配置插件
<CKEditor
  editor={ClassicEditor} // 或自定义构建的Editor
  config={{
    plugins: [CustomUploadAdapterPlugin],
    toolbar: ['imageUpload', /* 其他按钮 */]
  }}
  // 其他props
/>

方案3：自定义构建中包含上传插件 #

在CKEditor Builder中勾选Base64 Upload Adapter或Simple Upload Adapter，构建完成后直接使用即可，无需额外安装插件，也不会出现重复模块问题。

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