无法使用 CKeditor5 的“简单上传适配器”|遇到错误 - CKEditorError: ckeditor-duplicated-modules

Posted 2023-02-16

【中文标题】无法使用 CKeditor5 的“简单上传适配器”|遇到错误 - CKEditorError: ckeditor-duplicated-modules

【英文标题】：Unable to use 'Simple upload adapter' of CKeditor5 | encountering error - CKEditorError: ckeditor-duplicated-modules

【发布时间】：2020-02-18 20:32:11

【问题描述】：

我正在使用 reactjs 和 ckeditor5-react。我正在浏览标准文档以使用简单上传适配器 https://ckeditor.com/docs/ckeditor5/latest/features/image-upload/simple-upload-adapter.html

但它失败并出现以下错误：

CKEditorError: ckeditor-duplicated-modules: Some CKEditor 5 modules are duplicated. Read more: https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules
▶ 2 stack frames were collapsed.
__webpack_require__
D:/Projects/nodejs/node-react-firebase-flashcards/firecards/webpack/bootstrap:785
  782 | ;
  783 | 
  784 | // Execute the module function
> 785 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));
      | ^  786 | 
  787 | // Flag the module as loaded
  788 | module.l = true;

package.json - 相关部分：

  "dependencies": 
    "@ckeditor/ckeditor5-build-classic": "^12.0.0",
    "@ckeditor/ckeditor5-react": "^1.1.3",
    "@ckeditor/ckeditor5-upload": "^12.0.0",

我的进口

import React,  Component  from "react";
import CKEditor from "@ckeditor/ckeditor5-react";
import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
import SimpleUploadAdapter from "@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter"; ```


Within render:

<CKEditor
            editor=ClassicEditor
              plugins=SimpleUploadAdapter
            data="<p>Hello from CKEditor 5!</p>"
            onInit=editor => 
              // You can store the "editor" and use when it is needed.
              console.log("Editor is ready to use!", editor);
            
            onChange=(event, editor) => 
              const data = editor.getData();
              this.setState( cardEditor: data );
              console.log( event, editor, data );
            
            onBlur=(event, editor) => 
              console.log("Blur.", editor);
            
            onFocus=(event, editor) => 
              console.log("Focus.", editor);
            
          />

I was planning to use this to upload files and images. What could be the reason for this?

【参考方案1】：

阅读文档似乎你必须在插件中编译，而不是仅仅通过 webpack 导入它们：

https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html

https://ckeditor.com/docs/ckeditor5/latest/framework/guides/support/error-codes.html#error-ckeditor-duplicated-modules

【讨论】：

谢谢。我想我问这个问题有点太早了。我在文档中发现了相同的内容。我能够通过避免使用 CKEditor 5 文档中提到的 build 源来解决问题