WEB富文本编辑器的技术迭代

╰半夏微凉° 2024-03-26 21:05 35阅读 0赞

### 前言 ###

富文本编辑器对于一些涉及到编辑富文本内容的站点，尤其是论坛类的网站，可以说是绕不开的话题，例如CSDN发博文，默认是以富文本格式发布的。  
总体来说富文本编辑器发展主要经历了以下几个历程。

### 1. 早期阶段 ###

早期时代网页的富文本能力主要依靠对DOM的`contenteditable`属性来渲染样式，以及浏览器的`document.execCommand()`方法来修改富文本内容的样式，如粗体、斜体、文字颜色等等。这个时代主要的富文本编辑器有Ueditor、KindEditor、summernote、以及早期版本的CKEditor等。  
此阶段主要有以下几点优势：

1.  依赖于html原生的编辑能力，实现难度较低
2.  对性能要求不高，操作起来比较流畅

但是这个阶段的劣势也比较明显： 
3. 不同浏览器对于`document.execCommand()`方法实现方法的不同，会导致生成的html内容会不同，如同样对于粗体效果，有些浏览器可能通过``标签实现，有些浏览器可能通过``标签实现 
4. 删除内容会导致冗余的html标签内容，如删除`xx`内容中的xx，会遗留``标签

### 2. 进阶阶段 ###

此阶段主要通过DOM的`contenteditable`属性来渲染样式，另外比较进步的一点是将富文本内容抽象成数据模型，通过数据模型来管理编辑器的内容以及状态（选区状态等）。这个阶段的代表性产品有Quill、Draft.js、新版本的CKEditor等等。  
此阶段主要有以下几点优势：

1.  通过内部数据模型来管理富文本内容及状态，能够避免此前阶段同步浏览器之间对不同样式实现的差异
2.  通过内部数据模型，使得多人协同操作成为了可能

劣势主要包括以下几个方面：  
3. 技术门槛比较高  
4. 内部数据模型的实现，依赖于对DOM的变更监听来管理数据木星，在部分未知以及不确定的操作，可能会导致内部数据模型的错误。

### 3. 现代阶段 ###

此阶段的富文本编辑器彻底抛弃了`contenteditable`属性，通过浏览器的画布`Canvas`来渲染样式，以及通过内部数据模型来管理内容与状态。Google Doc是此阶段富文本编辑器的代表。  
由于通过`Canvas`来进行样式渲染，此阶段富文本编辑器需要在`Canvas`实现大量的样式效果，如粗体、文字颜色等，因此具有非常高的技术门槛。同时也由于该技术特点，此阶段的编辑器，具有良好的性能优势，尤其是在大数据方面。另外此阶段的编辑器在不同的浏览器上，渲染出来的样式也比较统一。