林中路

经过前几节的层层递进，我们了解了一个利用原生的属性和方法来实现一个简单版的富文本编辑器，但是目前版本的编辑器虽然功能上基本实现了，但是作为一个应用或者工程，还很低级，它的部分变量和全部方法暴露在全局变量下，并且无法在同一个页面实例化多个互不干扰的编辑器。本节我们就利用面向对象方法来对该编辑器进行封装设计。

目前的下拉框，我们都是新生成按钮，然后再在编辑器初始化的时候动态生成将按钮替换掉的，而且每一个下拉框都有一个单独的生成方法，代码冗余比较多，我们统一使用相同方法生成下拉框的dom，并且在生成工具条的时候直接渲染。我们现在的工具条所有按钮，都是写死在html中的，每个按钮一个li标签，但是这样，一是按钮越多，代码就越多，二是不方便扩展，每次新增一个功能按钮，都要去改html模板。所以，下一节我们将对代码进行面向对象的改造，让同一个页面可以生成多个不同的编辑器实例，各个实例之间可以互不干扰。

之前插入链接不起作用是因为我们的编辑器没有插入链接功能，无法插入链接，就无法验证取消链接功能，现在我们给编辑器加上了插入链接功能，插入链接后，选中链接，直接点击取消链接按钮，链接就能被取消了。插入链接的流程是当点击插入链接按钮的时候，弹出一个填写链接的输入框和一个确定按钮，点击确定按钮，为选中的文字增加链接。原因是，当我们点击某个字体的时候，浏览器就会取消编辑区内的选区，所以当我们执行命令时，并没有选区，所以会执行失败。现在我们对上面的代码进行改造，将字体列表改造为一个下拉选框，当选择值变化时，设置字体。

我们在 中为所有功能按钮添加点击事件监听，在点击对应按钮时执行相应的原生命令。然后我们回到页面中进行点击，会发现除了重做和撤销，其它按钮都不起作用，哪怕我们在可编辑区域输入文字，选择一段文字，然后点击按钮，也是没有任何效果。（可在分支复现）原因是：所以，我们改造一下HTML，将按钮全部改为元素：3. 改造CSS由于将原来的元素上套了一层元素，所以样式与我们最初设计的有了出入：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TjMJHt42-1670512440938)(h

从这一节开始，我们将亲自动手，使用我们之前介绍过的浏览器原生API来实现一个简单的可以处理文本的富文本编辑器。这一个简单版的编辑器，由于我们是基于原生的API，基于浏览器原生API的能力，我们将实现以下功能：文字输入文字格式调整段落格式调整其它通常，当用户使用富文本编辑器时，都希望点击一个按钮来实现某种功能，而传统的按钮太过丑陋，所以我们为其准备一个按钮图标。这里，我们使用 上提供的免费图标。我们可以进入iconfont 官网，登陆后，新建一个项目：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下

在浏览器和更早版本的浏览器中，是没有提供用来表示选区的对象的的，但是它们依旧有可编辑区域的相关能力，是因为它们提供了另一个对象接口：对象[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WYpG3x4R-1655347848546)(https://gitee.com/hjb2722404/tuchuang/raw/master/img/20201210162002.png)]我们先直观地看一下这些属性。我们有下面一段代码：再来看页面中选中一个选区后各个属性所指向的从上面的思维

通常，我们在浏览器中，都是直接通过 来直接使用对象的，但是由于浏览器中的页面可能包含框架集，此时每一个框架集都是有一个对象，那么如何准确获取我们需要的对象呢？如果页面包含多个框架（一般来说，每一个），那么每个框架都加载的是不同的文档，它们都有自己的 文档对象，在每个对象上都有一个名为 的属性指向它所在的，所以我们可以这样或取某个文档关联的 :如果该文档没有关联的对象，则会返回 ；但是日常开发中，我们往往首先拿到的是某个DOM节点而非对象，那我们又如何判断该节点是属于页面中哪个呢？每一个节点都有一个只读属性

文章目录前言富文本编辑器的基本发展史1.0 时代 —— 原始时代，`contenteditable` 大法好2.0 时代 —— 现代化，视图与模型分离3.0 时代 —— 后现代， 抛弃 `contenteditable`基础概念编辑区选区拖蓝光标基本API`contenteditable``document.execCommand()`语法参数说明`selection && range`前言富文本编辑器是前端开发中常见的功能，一般情况下，我们可以用成熟的开源富文本编辑器，比如比较老牌的

文章目录基本属性成员方法`setStart(startNode, startOffset)``setEnd(endNode, endOffset)``setStartBefore(referenceNode)``setStartAfter(referenceNode)``setEndBefore(referenceNode)``setEndAfter(referenceNode)``seelctNode(referenceNode)``selectNodeContents(referenceNode)``c

文章目录Selection简介原生的selection有以下属性：原生selection有以下成员方法：API详解Selection简介Selection俗称选区，它代表浏览器页面中的文本选区。文本选区是由用户拖拽鼠标经过文字而产生，当然，如果页面内某块区域时可编辑的（contenteditable）, 选区也可以获取光标所在位置，此时并没有文本被选中，所以此时的选区被标记为闭合选区，即选区闭合于光标所在位置，选区开始位置和结束位置为同一个位置。原生的selection有以下属性：属性说明

文章目录1. Selection 基本属性2. Selection 选区API`getRangeAt(index)` 获取拖蓝区域`collapse(parentNode, offset)` 将当前选区闭合到指定节点的指定位置`extend(node, offset)` 将选区焦点移动到特定位置。`modify(alter, direction, tranularity)` 修改选区`collapseToStart()` 取消当前选区，并把光标定位在原选区的最开始处`collapseToEnd()`

文章目录Range对象简介原生 API说明`Ragne`对象原生 `API` ——`IE9`以上及其它内核浏览器`how``TextRange` 原生 `API`——`IE9`以下浏览器Range对象简介Range, 直译为“范围”，俗称“拖蓝”，顾名思义，就是浏览器中使用鼠标拖拽选中的部分，通常会显示为蓝色背景，故称“拖蓝”。但“拖蓝”表示的并不是选中的文字内容，而是选中文字部分的HTML源代码，它的开始节点和结束节点都是HTML元素对象。还有一种特殊的拖蓝，即闭合的拖蓝，即它的开始节点和结束节点

文章目录示例语法参数说明可用命令示例execCommand的API示例语法bool = document.execCommand(name, isShowDefaultUI, argument);参数说明name ， 字符串，命令的名称，可用命令见下文表格isShowDefaultUI布尔值，是否展示用户界面，一般为 false， 并且Mozilla 没有实现augument 额外参数，某些命令需要传入额外的参数可用命令命令名称命令作用额外参数backColo