龙空技术网

富文本编辑器wangEditor迁移CKEditor前后效果对比

锅巴瓜子 143

前言:

眼前大家对“ckeditor4”大约比较重视,各位老铁们都想要剖析一些“ckeditor4”的相关知识。那么小编也在网络上收集了一些有关“ckeditor4””的相关知识,希望同学们能喜欢,你们一起来了解一下吧!

一、背景

富文本编辑器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编辑器效果

标签: #ckeditor4