那个 W 开头的

你是不是看我书读得少，想随便拿一串英文符号呼隆我？

这误会可不是普通的小啊！必须道个歉。听说合格的道歉露出胸部是基本，那这边就...

开玩笑的，回归正题。

WYSIWYG ：中文名『所见即所得』，为英文 “ What You See Is What You Get ” 取字头的缩写，是由『菲利普·威尔逊（ Flip Wilson ）』所提出的一种电脑文字编辑器方面的技术，也是一种 UI design pattern。

光看缩写确实会觉得是在供 Ｘ 小，但它的全名却翻译地非常直观，简单来说就是当我们使用符合 WYSIWYG 模式的编辑器时，编辑文字时看到的内容直接就等於储存送出後的显示内容。

这样的编辑器我们也同时称之为：富文本编辑器（ Rich Text Editor ）

最经典的范例绝对非 Microsoft office 系列的产品莫属，试着回想一下或现在马上开启一份 word 来编辑看看

Word 提供各式各样的功能让 user 操纵文字外观，诸如字型、字体、段落、颜色等等，它也同时提供额外的功能像是插入图片、影片。即便提供的一切华丽且繁琐，它始终不会违背一项原则，那就是『使用者在编辑画面上看到的内容就是实际的输出结果』

先撇除掉跑版这类的问题，在我们完成编辑并输出成 PDF 後，我们是可以完全预期它的输出结果会是什麽样子，而这就是 WYSIWYG 编辑器的核心原则。

听你这样一说确实在各处都看得见它的影子，像 Medium 应该也可以说是它在 Web 上的一种应用对吧？

没有错。

其实不只是 Medium ，上图举的 Microsoft word 也是在 web 上的云端应用，咱们网路大头「谷歌」的 Google-Doc 也是一个很典型的 WYSIWYG 在网路上的应用，相信大家对它们共同所拥有的 『共同编辑』功能并不陌生，能在线上多人一起编辑同一份笔记实在是非常方便，笔者大学时期的主修课会不会被当除了掌握在大神同学的手里也掌握在这些软件的手里。

其他如

• Dropbox paper

  

• 最近很火红的 Notion 也完全可以说是强化版的 WYSIWYG 编辑器

  

• 读者此时正在看的铁人赛文章，背後也是作家透过 rich editor 所辛苦编辑出的文章
  

也因为现代人对他的需求之高，在网页上除了相关的应用多如繁星外，也有许多团队开发了现成的 Library 提供给对建立 WYSIWYG 编辑器有需求的 web app project 做客制化的使用。

这篇系列文章的主角－ Slate.js 就是其中的一个，同时也是目前知名的 library 中最晚诞生的一个。咱们大名鼎鼎的 Facebook 团队也开发了一个专门 Build for React.js 的 library ，名叫 Draft.js 。

其他也有针对 Vanilla JS 开发者使用的 library ，诸如： Prosemirror 、 Quill 等等。

付费 library 自然也不在话下： TinyMCE 、 CKEditor 也都是针对 Vanilla JS 的开发者建立的付费 library。

好 OK，到目前为止我学到了新名词，也算是对 Slate 有一点初步的了解，但我想问个问题：在它之前已经存在了那麽多相似的 library 了， Slate 团队还大费周章来制作它的用意是什麽？换言之，它的『卖点』究竟在哪里？

这个问题问得非常好！

自己讲，够不要脸的 ＸＤ

这正是我们在下一个篇章要探讨的内容，但在那之前笔者希望读者们能先思考一件事。

其实光是看完这篇读者应该也能感觉得到， WYSIWYG 的开发是一个早已存在许久的老话题了，才会有相应那麽多的套件存在在市面上。

既然存在这麽久，使用程度又这麽高，不觉得身为网页开发重要主角的『浏览器』也应该要干点活儿，提供一些相应的功能吗？

有的，正是我们下一篇的主角，也是只要讨论到 Web WYSIWYG 就绝对无法避掉的一个话题： contenteditable ＆ execCommands

To be continued ... tomorrow ！