使用CKEditor时报plugincollection-required错误 编辑器无法正常显示

ERROR Error: Uncaught (in promise): CKEditorError:
plugincollection-required
{"plugin":"ImageUpload","requiredBy":"EasyImage"}

报错原因 #

该报错为CKEditor插件依赖缺失问题：EasyImage插件的正常运行必须依赖ImageUpload核心插件，当前CKEditor初始化配置中未引入ImageUpload插件，导致编辑器初始化失败、无法正常在页面渲染。

解决方案 #

方案1：补全依赖插件（推荐） #

在CKEditor的初始化配置的plugins数组中新增ImageUpload插件即可，示例配置参考：

import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-editor-classic';
import EasyImage from '@ckeditor/ckeditor5-easy-image/src/easyimage';
// 引入依赖的ImageUpload插件
import ImageUpload from '@ckeditor/ckeditor5-image/src/imageupload';

// 组件内调用CKEditor的示例
<CKEditor
  editor={ ClassicEditor }
  config={ {
    plugins: [ EasyImage, ImageUpload, /* 其他你已经配置的插件 */ ],
    // 其余原有配置项保持不变
  } }
/>

方案2：移除不需要的EasyImage插件 #

如果你不需要使用EasyImage提供的云端图片处理/上传功能，可以直接从初始化的插件列表中删除EasyImage项，报错会直接消除。

异常排查 #

如果已经引入两个插件仍然报错，检查以下两项：

• 确认ImageUpload和EasyImage的版本和你使用的CKEditor核心版本完全一致，版本不匹配会导致依赖识别失败
• 确认ImageUpload没有被误加入到removePlugins配置黑名单中

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