如何在React项目的CKEditor中添加文字颜色功能？

核心问题 #

你使用的@ckeditor/ckeditor5-build-classic是预编译的经典构建包，默认不包含Font插件；仅导入插件但未将其注册到编辑器实例中，导致toolbar中的fontColor配置无法生效。

具体解决思路 #

方案一：自定义构建（推荐生产环境使用）

预构建包无法直接扩展插件，最稳定的方式是重新构建包含Font插件的编辑器：

1. 打开CKEditor5在线构建工具，选择「Classic Editor」作为基础模板
2. 在插件列表中找到并添加「Font」插件（该插件包含文字颜色、背景色等功能）
3. 下载生成的构建包，替换项目中原有的@ckeditor/ckeditor5-build-classic依赖
4. 无需额外导入插件，直接在toolbar配置中添加fontColor即可生效

方案二：动态注册插件（适合快速测试）

如果只是临时测试，可以尝试动态将Font插件注册到经典编辑器中，但需注意版本兼容性：

• 修正导入代码，无需单独导入fontColor，只需导入Font即可：

  import { CKEditor } from '@ckeditor/ckeditor5-react';
  import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
  import { Font } from '@ckeditor/ckeditor5-font';
  

• 在组件注册前，将Font插件添加到编辑器的内置插件列表：

  // 注册Font插件到经典编辑器
  ClassicEditor.builtinPlugins.push(Font);
  

• 保持原有toolbar配置中的fontColor，此时按钮即可正常显示

关键注意事项 #

• 确保@ckeditor/ckeditor5-font的版本与@ckeditor/ckeditor5-build-classic完全一致，否则会出现依赖冲突导致编辑器报错
• 不要尝试使用color/colorButton等非官方toolbar项，CKEditor5中文字颜色按钮的正确标识是fontColor

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