谈谈浏览器中富文本编辑器的技术演进

文章预览

作者简介：刘杨，抖音前端团队低代码平台核心开发者。 发展历程 富文本编辑器按发展历程而言， 分为 L0、L1、L2 三个阶段，每个阶段都比上一个阶段定制程度更高，由浏览器导致的问题也更少（因为强依赖浏览器 API 的情况更少），同时开发难度也更大。 本文将详细讲解各个阶段，然后列举一些相关的产品来加以说明。 L0 阶段 这是富文本编辑器的早期阶段，这个阶段的编辑器强依赖于 DOM API，包括： 可编辑内容依赖 contenteditable API； 编辑内容使用 document.execCommand API。 并且没有抽象的数据模型来描述富文本编辑器的内容与状态。这个阶段的编辑器有大名鼎鼎的 UEditor ，也有 CKEditor 1 - 4 ，至今许多邮件编辑器也依然处于这个阶段。 Content Editable L0 阶段的编辑器主要就是依赖于 Content Editable API 来实现功能的。首先，任何 HTML 元素加上 content ………………………………