从零开始学写富文本编辑器(一)——背景介绍和相关资料总结

281 阅读1分钟

这是我参与11月更文挑战的第11天,活动详情查看2021最后一次更文挑战

前言

web端富文本编辑器一直被很多人称为是最难、最有技术挑战的项目之一。除了场景很复杂、需要处理的情况很多之外,其往往还会与在线协同、插件化等主题相关,每个相关的问题都需要认真讨论和研究很久。

最近涌现了几篇富文本编辑器相关的文章,有的回顾了其技术演进的历程,有的介绍了自己的产品或开源项目。虽然看上去就很难,但是我们抱着学习的态度,在这个系列中认真讨论和实践一下经验尚不足的前端开发者应该如何从零开始学习写成一个富文本编辑器。

技术演进过程

下列总结来自字节抖音团队的谈谈浏览器中富文本编辑器的技术演进,它主要介绍了web端富文本编辑器发展历程的三个阶段,并指出这三个阶段是逐渐往定制程度更高、对浏览器更有兼容性、以及开发难度变得更大的方向发展的。

一、Content Editable阶段

特点

  • 主要依赖Content Editable API来实现功能,即任何HTML元素加上contenteditable="true" 之后里面的内容都可以被编辑;document.execCommand API可以支持对这些编辑内容的操控;

二、