React JS中CKEditor5添加字体颜色遇重复模块错误的解决方法

错误原因 #

预构建的CKEditor5包（比如@ckeditor/ckeditor5-build-classic）已将所有核心模块打包在内。单独安装@ckeditor/ckeditor5-font并尝试作为extraPlugins添加时，插件依赖的核心模块会和预构建包内的模块重复加载，触发冲突报错。

正确解决方案：自定义构建CKEditor5（推荐） #

预构建包无法直接添加官方插件，需自行构建包含所需插件的编辑器：

1. 卸载原预构建包

npm uninstall @ckeditor/ckeditor5-build-classic

2. 安装核心依赖与所需插件
   根据需求安装基础编辑器、字体插件及上传相关插件（示例包含基础格式、字体颜色/背景色、简单上传功能）：

npm install @ckeditor/ckeditor5-editor-classic @ckeditor/ckeditor5-essentials @ckeditor/ckeditor5-paragraph @ckeditor/ckeditor5-basic-styles @ckeditor/ckeditor5-font @ckeditor/ckeditor5-upload

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-basic-styles/src/bold';
import Italic from '@ckeditor/ckeditor5-basic-styles/src/italic';
// 导入字体插件（包含颜色、背景色功能）
import Font from '@ckeditor/ckeditor5-font/src/font';
// 导入上传适配器（根据你的上传需求替换，示例用SimpleUploadAdapter）
import SimpleUploadAdapter from '@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter';

export default class CustomEditor extends ClassicEditorBase {}

// 注册要启用的插件
CustomEditor.builtinPlugins = [
  Essentials,
  Paragraph,
  Bold,
  Italic,
  Font,
  SimpleUploadAdapter
];

// 编辑器默认配置
CustomEditor.defaultConfig = {
  toolbar: {
    items: [
      'bold',
      'italic',
      '|',
      'fontColor', // 字体颜色按钮
      'fontBackgroundColor', // 字体背景色按钮
      '|',
      'undo',
      'redo'
    ]
  },
  // 替换为你的文件上传接口地址
  simpleUpload: {
    uploadUrl: '/api/upload'
  },
  language: 'zh-cn'
};

4. 在React组件中使用自定义编辑器
   替换原有的导入和组件调用：

import { CKEditor } from "@ckeditor/ckeditor5-react";
import CustomEditor from './CustomEditor'; // 根据实际文件路径调整

// ... 其他组件代码

<CKEditor
  editor={CustomEditor}
  data={value}
  onReady={(editor) => {}}
  onChange={this.handleCk5change}
  className="ckeditor-custom"
/>

替代方案：使用包含Font插件的预构建CDN #

若不想自定义构建，可直接使用包含Font插件的预构建版CDN链接，通过全局变量引入：

1. 在public/index.html中添加CDN链接：

<script src="https://cdn.ckeditor.com/ckeditor5/39.0.2/classic/ckeditor.js"></script>

2. 在React组件中使用全局的ClassicEditor：

import { CKEditor } from "@ckeditor/ckeditor5-react";

// 声明全局变量
declare const ClassicEditor: any;

// ... 组件代码
<CKEditor
  editor={ClassicEditor}
  data={value}
  config={{
    toolbar: [
      'bold', 'italic', 'fontColor', 'fontBackgroundColor', 'undo', 'redo'
    ],
    extraPlugins: [uploadPlugin]
  }}
  onChange={this.handleCk5change}
  className="ckeditor-custom"
/>

注意：CDN方式灵活性较低，若上传插件依赖额外模块仍可能出现重复加载问题，优先推荐自定义构建方案。

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