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

前言

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

1. 早期阶段

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

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

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

2. 进阶阶段

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

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

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

3. 现代阶段

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