目标
- 性能稳定
支持N( 1 < N < 200 )个编辑器实例编辑支持且不卡顿
边界问题容易处理 例如超出字数，粘贴内容处理
…
- 扩展性
容易扩展
保存的内容，支持任意地方直接渲染
支持多次编辑内容，不影响内容显示
支持自定义的工具栏和内容显示界面
支持自定义的占位符渲染 例如下划线、公式、下标点等
支持公式多次编辑
…
- 成本
上手开发与维护成本较低
社区生态丰富程度
- 风险考虑
替换成本与方案
升级成本
浏览器兼容
移动端编辑支持
…
- 安全
防范xss攻击
富文本编辑器现状
| 类型 | 描述 | 代表库 | 适用场景 | 其他 |
|---|---|---|---|---|
| L0 | 1.基于 contenteditable 2.使用 document.execCommand3.几千~几万行代码 |
UEditor,wangEditor | 基本能满足管理后台类项目；可定制化不高，无法支持协同编辑场景，不同浏览器渲染不一致 | |
| L1 | 1.基于 contenteditable 2.不使用 document.execCommand，自主实现 3.几万~几十万行代码 |
quil.js,draft.js,ckEditor, slate.js | 能够解决不同浏览器渲染不一致问题，定制化强，能够支持协同场景、基本满足 C 端编辑需求；⽆法突破浏览器本身排版效果 | |
| L2 | 1.不使用 contenteditable，自主实现 2.不使用 document.execCommand，自主实现 3.几万~几十万行代码 |
Google Doc,Tencent Doc | 编辑体验很好；技术难度和工作量巨大，没有开源的实现 | |
| L3 | 1.自主实现编辑容器 2.自主实现相关编辑命令 3.人工智能算法加持，结合VR支持场景更丰富 |
基于上
| 特点 | 不足 | 上手维护成本 | |
|---|---|---|---|
| quil.js/draft.js | - 基于自定义的数据模型 - 扩展比较方便 |
复杂应用仍然存在一定的自定义的局限性 | |
| slate.js | 提供富文本编辑器的框架，高度定制化 | ||
| ckEditor：商业版 | |||
| wangEditor |
参考资料
若有收获，就点个赞吧
0 人点赞
