对富文本编辑器的探索

图片来源 unsplash.com/photos/tWjz…

什么是富文本编辑器 ？

富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。它是一种解决可一般的用户不同html等网页标记但是需要在网页上设置字体的颜色、大小、样式等信息问题一个文本编辑器。

前端常用的富文本编辑器

• wangEditor：wangEditor 是一款使用 Typescript 开发的 Web 富文本编辑器， 轻量、简洁、易用、开源免费。
• Quill：Quill是一种现代的 WYSIWYG 编辑器，旨在实现兼容性和可扩展性。
• TinyMCE：TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。

基本原理

对于支持富文本编辑的浏览器来说，通过设置 document 的 designMode 属性为 on 后，再通过执行 document.execCommand(aCommandName, aShowDefaultUI, aValueArgument) 即可，比方说，我们要加粗字体，执行 document.execCommand(‘bold’, false) 即可。

document.execCommand

当一个HTML文档切换到设计模式时，document 暴露 execCommand 方法，该方法允许运行命令来操纵可编辑内容区域的元素。语法：bool = document.execCommand(aCommandName, aShowDefaultUI, aValueArgument)，返回值是一个 Boolean ，如果是 false 则表示操作不被支持或未被启用。
document.execCommand 这个API 已经废弃掉了，随时有可能被删除，所以现在使用这个API有风险。这个 API 本来也不是标准 API，而是一个 IE 的私有 API，在 IE9 时被引入，后续的若干年里陆续被Chrome / Firefix / Opera等浏览器也做了兼容支持，但始终没有形成标准。

废弃的主要原因

• 安全问题，在用户未经授权的情况下就可以执行一些敏感操作；
• 浏览器的行为不一致，不同浏览器生成的结果是不一样的；
• document.execCommand 生成的内容会产生很多不必要的标签；
• 它是因为这是一个同步方法，而且操作了 DOM 对象，会阻塞页面渲染和脚本执行，因当初还没 Promise，所以没设计成异步。

富文本编辑器技术阶段划分

• Level 0 是编辑器的起始阶段，代表旧一代的编辑器的实现；
• Level 1 由第一阶段发展过来的，具有一定的先进性，也引入了主流的一些编程思想，对于富文本内容有一定的抽象；
• Level 2 第三阶段，完全不依赖浏览器的编辑能力，独立的实现光标和排版；

不使用 document.execCommand 如何实现富文本编辑器？

• Clipboard ：Clipboard 接口实现了 Clipboard API，如果用户授予了相应的权限，就能提供系统剪贴板的读写访问。在 Web 应用程序中，Clipboard API 可用于实现剪切、复制和粘贴功能。系统剪贴板暴露于全局属性 Navigator.clipboard 之中。所有剪贴板 API 方法都是异步的；它们返回一个 Promise 对象，在剪贴板访问完成后被执行，不过它的兼容性不是很好。
• 建立抽象数据层：富文本编辑器比较复杂，在此基础上抽象出数据结构难度比较高，但没有数据层就无法实现更高层次的功能。有了数据层的基础，可以实现灵活的定制化渲染、跨平台、在线多人协作等高级特性。