React CKEditor中安装HtmlEmbed插件报错：ckeditor-duplicated-modules

在React项目中集成CKEditor时，已安装@ckeditor/ckeditor5-html-embed包以添加HtmlEmbed插件，但运行时触发错误：version.js:144 Uncaught CKEditorError: ckeditor-duplicated-modules。

相关代码如下：

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed';


function BaseEditor({ data = '', id = 'editor1', setMyEditor }) {

   return (
      <CKEditor
         editor={ClassicEditor}
         config={{
            plugins: [ HtmlEmbed ],
            toolbar: ["htmlEmbed" , "undo", "redo", "bold", "italic", "blockQuote", "ckfinder", "imageTextAlternative", "imageUpload", "heading",  "imageStyle:side", "link", "numberedList", "bulletedList", "mediaEmbed", "insertTable", "tableColumn", "tableRow", "mergeTableCells"],
            heading: {
               options: [
                  { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
                  { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
                  { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'ck-heading_heading2' },
                  { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'ck-heading_heading3' },
                  { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'ck-heading_heading4' },
                  { model: 'heading5', view: 'h5', title: 'Heading 5', class: 'ck-heading_heading5' },
                  { model: 'heading6', view: 'h6', title: 'Heading 6', class: 'ck-heading_heading6' }
               ]
            }
         }}

         data={data}
         id={id}
         onReady={editor => {
            setMyEditor(editor);
         }}
      />
   )
}

export default BaseEditor;

错误根源 #

预构建的ClassicEditor包（@ckeditor/ckeditor5-build-classic）已经封装了CKEditor核心模块，而直接导入插件的源码文件（@ckeditor/ckeditor5-html-embed/src/htmlembed）会重复引入核心模块，导致冲突报错。

两种解决路径 #

路径1：自定义构建编辑器（推荐） #

预构建编辑器无法直接扩展插件，需从源码构建包含HtmlEmbed的自定义编辑器：

1. 卸载预构建ClassicEditor：

npm uninstall @ckeditor/ckeditor5-build-classic

2. 安装编辑器核心、基础组件及所需插件：

npm install @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-essentials @ckeditor/ckeditor5-paragraph @ckeditor/ckeditor5-bold @ckeditor/ckeditor5-italic @ckeditor/ckeditor5-html-embed
# 按需添加代码中用到的其他插件，比如blockQuote、ckfinder等

3. 创建自定义编辑器文件（如CustomEditor.js）：

import ClassicEditorBase from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Essentials from '@ckeditor/ckeditor5-essentials/src/essentials';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Bold from '@ckeditor/ckeditor5-bold/src/bold';
import Italic from '@ckeditor/ckeditor5-italic/src/italic';
import HtmlEmbed from '@ckeditor/ckeditor5-html-embed/src/htmlembed';
// 导入你需要的其他插件，比如BlockQuote、CKFinder等

export default class CustomEditor extends ClassicEditorBase {}

CustomEditor.builtinPlugins = [
  Essentials,
  Paragraph,
  Bold,
  Italic,
  HtmlEmbed
  // 加入其他插件
];

CustomEditor.defaultConfig = {
  toolbar: [ 'htmlEmbed', 'bold', 'italic', 'undo', 'redo', 'blockQuote', 'ckfinder' /* 按需添加工具栏项 */ ],
  heading: {
    options: [
      { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' },
      { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' },
      // 其他标题配置
    ]
  }
};

4. 在React组件中替换编辑器导入：

import { CKEditor } from '@ckeditor/ckeditor5-react';
import CustomEditor from './CustomEditor';

// 后续使用CustomEditor代替原ClassicEditor

路径2：使用包含HtmlEmbed的预构建包 #

若不想自定义构建，可替换为官方全功能预构建包（包含HtmlEmbed及多数常用插件）：

1. 卸载原预构建包：

npm uninstall @ckeditor/ckeditor5-build-classic

2. 安装全功能构建包：

npm install @ckeditor/ckeditor5-build-full

3. 更新组件导入：

import { CKEditor } from '@ckeditor/ckeditor5-react';
import FullEditor from '@ckeditor/ckeditor5-build-full';

// 使用FullEditor代替ClassicEditor，无需手动在config.plugins中添加HtmlEmbed

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