Strapi 4如何将默认Wysiwyg编辑器替换为CKEditor?
问题描述
Strapi 4正式发布后,适配该版本的CKEditor库已不再提供官方支持。按照官方文档说明,更换现有WYSIWYG编辑器可选择安装第三方插件,或利用bootstrap生命周期(参考Admin Panel API)实现,但文档未明确说明是否需要通过组件注入或其他流程操作。此前Rémi de Juvigny在Strapi 4相关演示中使用的组件注入方案仅适用于侧边栏修改,无法直接用于替换特定内容类型集合的编辑器。请问是否有开发者已在Strapi 4版本中成功完成CKEditor的替换配置?
解决方案
已经有大量开发者在Strapi v4版本中成功完成CKEditor的替换配置,目前有两种经过社区验证的可行落地路径:
- 直接使用社区维护的第三方CKEditor适配插件
这类插件已经预先完成了和Strapi v4表单逻辑、内置媒体库的适配,不需要从零开发自定义逻辑,按照插件说明完成依赖安装、配置启用即可生效,普遍支持全局替换所有富文本字段、仅替换指定内容类型/指定字段两种模式。 - 手动自定义实现编辑器替换
如果你需要高度定制CKEditor的功能,可按以下步骤操作:- 先在Strapi项目中安装CKEditor相关依赖:
npm install @ckeditor/ckeditor5-react @ckeditor/ckeditor5-build-classic,也可以根据业务需求选择其他CKEditor构建版本。 - 在
src/admin/components目录下创建自定义CKEditor组件,确保组件兼容Strapi默认富文本字段的所有入参(包括value、onChange、disabled、error提示等属性),如果需要对接Strapi内置媒体库,需额外适配CKEditor的文件上传回调逻辑。 - 在
src/admin/app.js的bootstrap生命周期中注册自定义组件,添加判断逻辑即可实现指定范围的编辑器替换:不需要全局替换所有富文本字段的话,可在注册逻辑中获取当前字段所属的内容类型ID、字段名称,匹配成功时返回自定义的CKEditor组件,否则返回默认富文本组件即可。
- 先在Strapi项目中安装CKEditor相关依赖:
注意:所有管理后台的自定义配置完成后,都需要重新构建管理后台才能生效,开发环境执行
npm run develop重启服务即可,生产环境需执行npm run build重新构建后台资源后再部署。
内容的提问来源于stack exchange,提问作者Marco Villanueva
相关产品推荐
相关产品推荐

