|
我们在每天的工作和生活中都会用到文字编辑，无论是办公、记录、聊天还是发弹幕。我们用的文字编辑器是怎么诞生的呢？它又是如何工作的？今天我们一起来看看编辑器的前世今生。我们现在用到的编辑器有一个很好玩的名字叫“WYSIWYM”或者“WYSIWYG” （What you see is what you mean or get），即“所见即所得”编辑器。编辑器的体验模拟传统书写体验，在编辑器中输入的内容即是最终呈现的内容。最早的WYSIWYG编辑器Bravo诞生于1974年，它是运行在Xerox Alto，这部最早拥有用户图形界面（GUI）的电脑上。Xerox Alto不是一个商业化量产的产品，但是曾经生产过上千台，在美国很多研究中心与美国大学中使用。Xerox Alto启发了个人电脑的设计方向，如安迪·贝托尔斯海姆根据Xerox Alto设计出SUN工作站。苹果公司的Mac电脑，最初也是参考Xerox Alto设计。有趣的是，Xerox Alto的显示屏是竖着的。 
▲Xerox Alto和运行在它上面的Bravo编辑器 文本编辑器变成每个人都可以使用的工具是从上个世纪80年代开始的，1983年微软的MS Word诞生，随着Window3.0的推出，MS Word在90年代初迅速占领了WordPrefect和WordStar的市场。
30多年来，随着Windows操作系统的不断普及，MS Word一路发展，直到今天也是很多人在使用的文字编辑工具。但Word的诞生之初面对商务办公场景，目的是把商务办公中的文档进行数字化。随着时间的推进，这一代的文本编辑器的工具栏变得越来越复杂，期望以越来越丰富的功能满足用户需求。但实际上用户对文档的使用方式已经完全改变，不仅仅追求办公文档的电子化，而是把文档作为信息收集整理，甚至是团队协作的工具。同时，在这30多年里，工程师们对于更灵活，交互更方便的编辑器的探索从未停止。他们致力抛弃功能冗余、交互繁复、在平台间移植不便的传统编辑器，以求研发出面向普通大众用户，展现丰富、数据兼容、交互方便的新型编辑器。互联网的兴起和HTML技术的普及，使得浏览器功能益发强大，几乎所有的工作都可以放在浏览器内部完成。文本编辑也伴随着浏览器技术的发展，形成了一个新的分支技术——在线编辑。在线编辑器的发展已经经历了20余年的历史，在web技术体系下的在线编辑器基于HTML的全局属性contenteditable，借助于DOM API 中提供的功能，例如document.execCommand等，实现传统编辑器的基础编辑功能。原生在线编辑器直接调用DOM提供的API，存在很大的局限性。这其中包括频繁更新DOM操作带来的性能问题、多平台浏览器的兼容问题、编辑器状态维护问题等等，使得最终用户在使用中有很多编辑体验方面的问题。在原生在线编辑的基础上，发展出了基于web技术的初代在线编辑器。他们的主要思路是：通过对于底层框架使用的封装，解决部分浏览器兼容问题；提供更好的上层使用接口，为DOM的更新提供更便捷的方式；抽象公共处理组件，统一相同类型操作的规范，同时解决编辑器状态管理问题；有限的命令集进行扩充。初代在线编辑器中具有代表性的包括：CKEditor、TinyMCE
这是初代编辑器比较大的问题，也是前端技术近年来持续在解决的问题，就是如何通过技术实现减少对于原生DOM的操作，这其中包括使用dom diff算法、如何减少重绘、重排等。编辑器的状态管理也是原生web编辑器所存在的较大问题，更多的状态与状态之间的关联关系很难通过DOM API的调用方式进行维护，即便做了部分层面的封装但还是很难统一管理。只能借助于工具栏与编辑器的交互即兴实现，使用户在使用过程中需要频繁操作工具栏，延长了使用路径。 虽有各种不足，这些初代在线编辑器帮助很多在线业务解决了在线编辑从无到有的问题，也被广泛使用。到2013年左右，开始出现新一批现代在线编辑器（Modern Editor），从技术的角度来看，他们共同的特点是：基于自建的数据模型，提供通用扩展接口、实现各种格式、撤销、重做等功能，在遵循一定数据规范之上，它们可以实现跨版本、跨平台之间的兼容。这些编辑器中具有代表性的包括：CKEditor 5、Slate.js、Quill.js、Draft.js从使用者角度来看，这些现代在线编辑器也有一些明显的共同特性。现代在线编辑器的模块化属性通常被拿来和乐高积木做类比，一个个模块化的组件组成了文档或文件。用户可以自由选择他们内容中所需要的模块：文本、图片、标题、代码块等。这些模块像乐高的部件一样可以自由拖拽和堆叠。
“/” 快捷命令（slash commands）最早出现在聊天工具IRC内， 后来被Slack等在线聊天工具借用，开始逐渐普及。进而出现在各种新的在线编辑器中。“/”作为键盘的快捷方式，方便用户唤起功能，同时简化屏幕上的不同展现，目前在现代在线编辑器的用户中形成了比较普遍的使用习惯。
快捷编辑菜单的使用更进一步优化了用户的编辑体验。当高亮部分文字时，快捷编辑菜单会自动出现，并且展现所需要操作的相关功能。也避免了用户在传统编辑器的模式下，在繁复的工具栏里找到自己所需要的信息。如果高亮的部分是图片，那么快捷编辑菜单里将出现与图片操作相关的功能。
作为全球最大的笔记工具，编辑器一直是印象笔记的产品核心。Evernote的创始人Stepan Pachikov也是从上个世纪80年代就开始致力于文本编辑和手写输入的研究。
▲他们是在讨论编辑器吗？（Stepan和比尔·盖茨在硅谷，1990年）Stepan和他的团队在1997年从俄罗斯到硅谷创业后，更加速了在编辑器方面的研发。
Evernote的诞生恰逢用户在编辑体验上的重大变革，智能手机的普及、跨客户端和多设备的支持、多模态的笔记格式，使得印象笔记的编辑器在很大程度上超越了历史上的那些编辑器们。印象笔记的编辑器从诞生之初就支持4个客户端（iOS、安卓、Windows、Mac)的原生体验，以及Web端的在线编辑。在不同客户端的编辑器是在统一架构下的原生开发，并且可以通过统一的数据格式实现多平台的同步。随着印象笔记中国团队的独立拆分，印象笔记终于有机会在Evernote过去10余年技术累积的基础上注入更多的新科技，加速在线编辑器的研发。现在我们隆重推出了印象笔记的新一代在线编辑器 ——「超级笔记」。「超级笔记」得益于更灵活的底层框架与展现层框架实现无缝对接，提供展现层面所需要的视觉能力，新增了block菜单、快捷格式菜单、类型转换菜单，引入了表格类型转换能力、列头交互能力，使得「超级笔记」带来了令人耳目一新的用户体验。
从视觉上来看，印象笔记的超级编辑器同样做出了模块化的改变。用户会注意到超级笔记引入了一个全新「插入和拖动」的图标，所有的内容包括文本、图片、表格等内容皆为模块，可以自由拖拽重组。有别于传统的编辑区域和编辑工具栏相分离的编辑器，在「超级笔记」的形态下笔记不再是单一的实体, 而是可自由组合任意排列的内容聚合体。交互体验大大优化，不再依赖传统的顶部工具栏，而是通过模块插入菜单、快捷编辑菜单、格式转换菜单等方式唤起，使得用户的编辑体验更专注，不离开键盘就可以实现绝大部分操作，不再需要在工具栏中反复寻找。在印象笔记的「超级笔记」中，模块可以是任何类型，可以不断扩展，同时提供具有很高灵活性的模块拖拽功能。让用户可以像搭建乐高一样，将不同的模块拼装为任何想要的笔记形态，并且组装完成后的模块随时可以被任意的模块所替换和组合。在「超级笔记」形态下，印象笔记的最小粒度将从一篇篇的笔记变更为内容模块（block）。
从技术上来说，「超级笔记」引入了数据驱动视图的概念，通过数据类型的定义、数据状态的定义、数据更新事务的管理、插件化的统一封装，使编辑器变得更加稳定、灵活，具有更高的扩展性。表面上看起来灵活多变的模块化内容组织，在技术上用一套严格的逻辑来定义。所有模块皆有明确的语义结构，独立于模块在编辑器上的视觉呈现。只有这样，我们才能很容易地做到模块之间的自由拖拽和嵌套。用户在编辑器上的操作是在视图层进行，这些操作都可以通过数据展现层精确地对应到数据存储层的特定状态，以准确记录各种编辑行为及对应的内容状态的变化，为编辑器的扩展能力打下良好基础。而用户的每一个具体操作，编辑器用状态（State）进行实时记录。例如编辑时进行的加粗、背景颜色调整、文本颜色调整，音视频的播放状态等，这些操作需要能够被撤销和反撤销，需要能够回溯到相应的操作历史。对于用户一个操作的状态管理，就像银行的实时交易系统对账户的记录，要保证每一分每一秒账户信息的准确，并需要保证在编辑的情况下可以回溯到曾经编辑过的任何一个版本。状态管理的引入，使得「超级笔记」在未来协同编辑的扩展性上大大提升。在研发的过程中，「超级笔记」如何兼容用户历史笔记也是一个重要话题。新的编辑器保留了印象笔记的特性，继续采用原生客户端与web技术的混合开发方式，在保证了客户端原生实现的良好用户体验的同时，借助web更灵活的视觉、交互等提供给用户更好的使用体验。同时保证了对原有编辑器笔记的兼容与支持。视图和数据层的分离赋予编辑器强大的扩展能力, 未来多样化的模块和智能化服务接入都将变得更加容易。举例来说，如果我们引入一种新的内容样式，就在「超级笔记」新增一种新的模块类型，而这个新的模块类型将分别在视图层对应新的呈现方式、在数据层对应的新语义描述。插件化的方式也增加了与其他服务对接的能力，这样未来在服务能力的提升上也变得更加灵活方便。「超级笔记」的推出，为印象笔记提供了最新的基础架构。它的易联结性和易扩展性使得印象笔记变得更灵活，多模态链接丰富用户的记录体验，对音频、视频、网页信息的收藏更友好。而编辑器能力的提升也使记录和用户使用场景的连接更近。「超级笔记」未来可以支持更多轻量级的应用，笔记内容也可以更方便地整合和分享。
|
