当前位置：网站首页 > 技术文章 > 正文

富文本编辑器CKEditor4迁移方案

“富文本编辑器CKEditor4迁移方案” 网站介绍

之前写过《富文本编辑器wangEditor迁移CKEditor前后效果对比》，结合大家的反馈后进行了调整。增加了具体案例的展示CKEditor插件和事件系统，重新整理成迁移方案。

老版本富文本编辑器wangEditor的工具栏如图所示

新版本富文本编辑器CKEditor4工具栏如图所示

老版本编辑器有以下常见业务场景不支持：

我们能够将不同的业务场景写成插件，同时可以通过调整插件监听事件的优先级来干预（或部分借用）内置插件的结果。

默认情况下向编辑器内粘贴图片操作会直接插入编辑器内，但是我们需要用户在粘贴图片的时候，显示一个二次确认弹框，提示用户选择是直接将该图片粘贴到编辑器内或者上传为附件使用。

改进方案

我们的自定义插件可以通过设置合适的优先级借用内置插件的准备流程同时避免原处理流程中其它可能干扰结果的处理回调。

可以通过配置项组合成不同的过滤器，对编辑器内容的获取结果进行控制。

灰度期间客服反馈新版编辑器正在编辑的内容显示正常，内容发送出去后存在"增加空行的情况"，

原因：调用接口是会调用CKEditor的getData方法获取编辑器内容，该方法中CKEditor会将空标签（例如<div></div>）内加入空行，从而导致原来高度为0的空标签有了高度，和编辑时显示的效果不一致，发送的内容在视觉上就感觉是“增加了空行”。

鉴于邮件内容来源不可控，无法避免外部邮件可能存在空标签的情况，在参考官网及网上设置了多种不同的配置项后，仍未达到理想的效果，我们的自定义过滤器暂时直接原样返回innerHTML内容作为输出结果。