5

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

 3 years ago
source link: https://www.daozhao.com/10226.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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

如果您发现本文排版有问题，可以先点击下面的链接切换至老版进行查看！！！

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

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

file

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

file

二、wangEditor编辑器存在问题

1. 字号和字体设置不友好

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

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

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

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

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

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

三、迁移成新版编辑器CKEditor4的优点

1. 能平稳迁移

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

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

有格式刷插件

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

3. 容易扩展

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

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

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

file

四、迁移前后效果对比

1. 支持格式刷

file

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

file

wangEditor编辑器粘贴效果

file

CKEditor4粘贴效果

file

3. 支持调整表格

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

file

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

wangEditor编辑器效果

file

CKEditor4编辑器效果 file

更新时间：2021-11-01 01:40
上一篇：下一篇：

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK