经过了三天的文章後，我们总算要进到新的『 Compare 』篇章了。

前两天我们介绍了 WYSIWYG 一词本身所代表的涵意，并列举了一些市面上知名的应用，并接着介绍了浏览器提供的 contenteditable 属性以及 execCommand api ，以及它们并不适用於现今的网页开发技术的原因。

还没阅读的读者们， 传送门在此～

• Day 2
• Day 3

在 Compare 篇章里会不时的提到上述的这些内容，因此先认识这些名词能帮助读者更容易消化之後的文章。

延续上一篇不同 『世代』 的编辑器的议题，我们可以大致上为网页编辑器分成 G1 、 G2 、 G3 这三个世代。

G1 用力地抱好浏览器的大腿

第一世代的编辑器选择大幅度地依赖在 contenteditable 属性上，主要负责处理跨浏览器的相容性问题，提供的 api 也更贴近於使用 execCommand api 的语法糖，也有些选择放弃 execCommand api 自己实作一套命令代替原本的功能操作 DOM 元素。

但总归而言主要还是依附在 contenteditable 属性与 HTML Document 上去实作。

开发者不需要太多相关於 WYSIWYG 编辑器的底层知识，只要绑好指定的 DOM element 、做好 init 、再把 library 提供给开发者的扩充套件装一装就可以直接使用了。

它们更像是直接将套件提供的，架构早已定死的编辑器拿来使用在自己的 web 应用上，编辑器的功能几乎都是由 library 提供的，开发者能做的几乎只有调调参数、装载套件去选择功能，顶多再调个外观，而不是自己手动新建一个编辑器。

我们会在下一篇提供更详细的范例来做介绍，这边只是先大概说明一下他们之间的区别而已

G2 尝试叛逆，但还是会跟家里拿钱

到了第二世代以後的编辑器主要依赖於自定义的 Data Model ，而不直接依赖於 DOM ，比起思考如何填补 contenteditable 所带来的缺口，它们更将重点放在自定义的 Data Model 与 DOM 之间的资料转换与操作行为，比如：

• Quill.js 的 Document model —— Parchment 。以及自定义的 delta 格式描述资料转换。
• Draft.js 的 Document model —— 透过 Immutable.js 自定义的 schema 。
• Slate.js 的 Document model —— 透过 Immer.js 自定义的 schema 。

上面提到的内容也都会在後续的篇章介绍，这边只是先简单举个例而已。而针对 Data model 与 Document model 之间的差异我们也会在之後的章节做介绍。

这个世代的编辑器依旧会使用 contenteditable 当作与使用者互动的介面，提供给编辑器当前的光标位置、 User 的反白位置与当前活动的区域，差别就在於储存的资料格式与中间的转换行为是自定义的。

目前市面上大多数的 WYSIWYG 套件都属於这个世代的，只是它们的实作方式与定位又能进一步将它们区分开来，这也是我们主要在这个篇章会探讨的主题。

G3 放飞自我，预算无限

再来到了第三世代的编辑器，Google Docs 几乎从头到尾舍弃了浏览器的支援，在第二世代的编辑器里还看得到以 contenteditable 作为与使用者互动的介面提供编辑器部分的资料，但到了这边已经完全被拔除了。

Google Docs 建立了自己的一套编辑界面（ editing surface ）与渲染引擎（ layout engine ），对於浏览器来说，Google Docs 提供的编辑器完全就只是一个由 Javascript 处理一切动态效果的页面。

它完全不依赖於浏览器提供的光标与使用者反白等资讯，而是透过编辑界面去动态计算滑鼠点击位置在画面上的 x 与 y 轴，并画出一块 div tag 来代表光标元素，反白资讯也是以相同的方式去制作。

至於文字与其他资料的相关呈现则依靠渲染引擎，透过计算文字的长与宽等资讯结合当前光标的 x y 轴资讯去计算出例如：新安插的文字的摆放位置。

对这些资料感兴趣的读者可以参考 Google Drive Blog 撰写的 这篇 介绍新版 Google-Docs 的文章。

其他还有像 ICloud Page 也属於这个世代的编辑器，但因为这一世代相关的专案都并非开源专案，这也需要足够庞大的人力与精力才有办法踏进这池深水，所以笔者也没有做太多功课，在整篇系列文章中也不会多做介绍。

G5 是云霄飞车

对不起我也知道这是一个烂到不行的梗但我就是忍不住 ...

在了解了各个世代的编辑器各自的特色以後，我们接下来会顺着时间轴依序将一、二世代中不同编辑器 library 与 slate.js 做比较。

分别是 G1 的 CKEditor 与 TinyMCE ，以及 G2 的 Quill 以及 Draft 还有最後的 Slate。

其实市面上有非常多优秀的 libraries 是值得拿出来介绍的，像 ProseMirror 原本也是笔者在这篇系列文章的目标之一； Froala 也是笔者在准备整篇系列文章时查到，近期讨论度颇高的一个，只可惜时间有限，心有余而力不足之下还是只能缩限介绍的范围，未来有机会再补上这些内容。

那今天就到这边拉 ～ 明天 G1 见！