类似ckeditor的编辑器（富文本编辑器wangEditor迁移CKEditor前后效果对比）

一、背景

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

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

二、wangEditor编辑器存在问题1. 字号和字体设置不友好

客服反馈无法快速通过工具栏图标找到设置字号、字体的功能

老版编辑器设置字体（或字号）与许多主流编辑器及Office软件操作有所不同，不支持先设置字体（或字号）再进行输入文字，只能先选中目标文字，再设置字体（或字号）。

2. 无法满足后期功能扩展

2.1 未使用模块化思维组织源代码 全部代码都在一个文件里面。

2.2 没有自己的事件机制 不易控制同一事件不同回调之前的优先级、同类回调函数的取消等，比如扩展粘贴场景时，可能需要避免兼容之前已有的回调。

2.3 没有对编辑器内容的插入过程的控制流程 无法在编辑器setData的过程中对原始数据进行修改、过滤等操作。

三、迁移成新版编辑器CKEditor4的优点1. 能平稳迁移

CKEditor4天生支持将编辑区域嵌套iframe中，与老版本编辑器改造后效果一致，符合原有项目中的样式隔离要求。

2. 内置插件符合业务场景

有格式刷插件

表格插件支持通过右键菜单调整表格

3. 容易扩展

3.1 内置插件机制 可将不同的业务需求写成独立的插件。

3.2 内置事件机制 能设置事件响应的优先级，控制回调执行顺序，干预和调整默认执行结果。

3.3 通过配置项控制getData和setData 可以通过配置项组合成不同的filter，对编辑器内容和设置的过程进行控制。

四、迁移前后效果对比1. 支持格式刷

2. 表格粘贴效果更接近复制源样式

复制源

wangEditor编辑器粘贴效果

CKEditor4粘贴效果

3. 支持调整表格

支持对编辑器中的表格进行调整（暂未开放）

4. 支持调整图片排版、拖拽

wangEditor编辑器效果

CKEditor4编辑器效果

,