前言:
眼前大家对“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