heylagostechie-tWjzmNXKup4-unsplash.jpg

图片来源 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 目标，在剪贴板拜访完成后被履行，不过它的兼容性不是很好。
  • 建立笼统数据层：富文本编辑器比较复杂，在此基础上笼统出数据结构难度比较高，但没有数据层就无法完成更高层次的功用。有了数据层的基础，可以完成灵活的定制化烘托、跨渠道、在线多人协作等高级特性。