编辑器实现越来越"卷"

最新推荐文章于 2024-03-05 17:44:52 发布

lefex

最新推荐文章于 2024-03-05 17:44:52 发布

阅读量245

点赞数 1

文章标签： java python 大数据 html 编程语言

本文链接：https://blog.csdn.net/lefex/article/details/123173552

版权

编辑器据说是前端中的一个深坑，我们看看有多深。

第一代编辑器，起初编辑器的实现方式是由 contenteditable 和 document.execCommand 这两个东西实现的。contenteditable 用来标记一个HTML 元素可以编辑，document.execCommand 可以对编辑的内容进行格式化，比如对某段文字进行加粗。

这一代编辑器基于传统的模式，把DOM作为数据源。

但是 document.execCommand 这个 API 目前已经废弃了。

第二代编辑器使用的还是 contenteditable，只是不再使用 document.execCommand，完全自己实现，编辑器会提供一系列 API，对文本内容进行格式化，比如：

// 加粗
editor.format('bold', true);
// 设置字号 20
editor.format('size', 20);
// 设置字体颜色
editor.format('color', 'red');

这些 API 被称为「命令系统」，有了这些API的支持，那么编辑器可以完全与 toolbar 进行脱钩，UI长什么样编辑器完全不管。没错这就是我说的 toolbar：

我试着用 contenteditable 实现了一个简单的编辑器：

这个实现效果完全出乎我的意料。比如你可以编辑表格、删除内容、撤销、重做、无序列表、有序列表等都支持的不错。

剩下的需要添加一个 toolbar，这样可以对输入的内容进行格式化，比如修改文字颜色，字体大小等。

那么，如果想给选中的内容进行加粗，该如何做？比如我选中了下面这些内容，包含文字与图片：

首先需要获取选中的节点，这就涉及到了编辑器中的一个核心知识「选区」，可以使用浏览器提供的方法 window.getSelection() 来获取选中的 DOM 元素，进行添加样式或增加标签（这里说的比较简单，其实处理的工作不少）。

第二代浏览器还有一个显著的特点，以MVC的模式实现，通过数据驱动 UI。为啥需要个数据Model，想详细了解的可以看这篇文章：

https://medium.engineering/why-contenteditable-is-terrible-122d8a40e480

第三代编辑器，不依赖于 contenteditable，自己实现光标、选区等。典型的代表有Google Doc，office、wps。当然难度相当的高，可定制性非常高。

其实可以跳出编辑器的实现，看看编辑器实现过程用到的最原始的技术。这里大家可以想一下，编辑器实现为啥不用 textarea？编辑器实现过程中引入了数据model，那么如何把用户的输入转化成数据model？

编辑器中还有很多知识，别急，慢慢啃，我只是学了个皮毛。大家加油！！

长按关注

素燕《前端小课》

帮助 10W 人入门并进阶前端

官网：https://lefex.gitee.io/

关注