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实现大量的样式效果,如粗体、文字颜色等,因此具有非常高的技术门槛。同时也由于该技术特点,此阶段的编辑器,具有良好的性能优势,尤其是在大数据方面。另外此阶段的编辑器在不同的浏览器上,渲染出来的样式也比较统一。

猜你喜欢

转载自blog.csdn.net/m0_58016522/article/details/129744969