文本选区Selection 的简单应用

骑猪看日落 2022-10-07 14:57 198阅读 0赞

最近学习了下文本选区，并用文本选区实现几个简单的效果

## 1、实现目标 ##

1.  鼠标拖拽选取文字，可对选取的文字设置背景色； 可取消对背景色的设置，重新选取设置； 背景色不能交叉重叠
2.  在光标处插入图片

要实现这几个功能，首先介绍下Selection和Range。功能十分强大。

## 2、文本选区Selection ##

> 文本选区表示选择的文本范围或者插入符号的当前位置。简单来讲，每当拖拽鼠标或者点击鼠标就会形成文本选区。

### 2.1、获取文本选区 ###

`var selection=window.getSelection();`

### 2.2 文本选区常用属性介绍 ###

###### 2.2.1 type ######

> type表示文本选区的类型：目前有3种取值 None、Range和Caret

*  None：页面上没有进行鼠标拖拽选取或者点击
 *  Caret：光标插入
 *  Range：范围、区域。简单来说是按下鼠标拖拽对应的Selection

###### 2.2.2 isCollapsed ######

> 返回一个布尔值，用于描述文本选区的开始位置和结束位置是否位于同一位置。  
> 注意：即使isCollapsed=true，其rangeCount也可能大于0，selection.getRangeAt(0)会在选区被折叠的情况下返回一个值。

###### 2.2.3 anchorNode ######

> 文本选区开始位置所属的节点。

> **注意：**  
> 文本选区开始位置：按下鼠标开始拖拽的位置  
> 文本选区结束位置：松开鼠标结束拖拽的位置

###### 2.2.4 focusNode ######

> 文本选区结束位置所属的节点

###### 2.2.5 anchorOffset ######

> 文本选区从anchorNode的第一个字符开始的偏移量，从0开始计数

###### 2.5.6 foucusOffset ######

> 文本选区从focusNode的第一个字符开始的偏移量，从0开始计数

## 3、Range对象（拖蓝） ##

> 页面上的一个拖蓝就对应一个Range对象，一些浏览器页面上只支持一个拖蓝比如Chrome，像是Firefox就支持多个（按下command即可实现多个拖蓝区域）

> 可以通过拖蓝对象提供的属性和方法对拖蓝内容实现拷贝、复制、删除，同时支持节点、文本的插入等等。

### 3.1 Range对象的获取 ###

var range=selection.getRangeAt(0);

## 4、实现 背景色的设置取消不可交叉重叠 ##

### 4.1 选取文字设置背景色/字体大小 ###

###### 4.4.1 Range.surroundContents() ######

> 将 Range 对象的内容移动到一个新的节点，并将新节点放到这个范围的起始处。简单来说就是用一个新标签将选择的文本包裹起来

我第一个想到的就是这个方法，代码少书写简单，实现代码如下：

var span = document.createElement('span');
    span.style.backgroundColor = 'red';
    range.surroundContents(span);

但是但是，在使用这个方法时有个严重的问题：如果Range对象断开了一个非Text节点，只包含了一个节点的边界就会抛出异常。。也就是说如果一个节点只有部分被选中，整个操作都会失败

好的，既然上面的方法的限制条件太那啥，我们就换另一种思路实现。。。

*  新建节点、给节点设置背景色/字体大小
 *  将拖蓝部分的文本内容塞入到新建的节点中
 *  插入新建的节点
 *  删除拖蓝部分的文本（防止文本重复）

var span = document.createElement('span');
    span.style.backgroundColor = 'red';
    span.innerText = range.toString();
    range.deleteContents(); // 删除拖蓝部分
    range.insertNode(span); // 在range的开始位置插入节点

###### 4.1.2 Range.deleteContents() ######

> 删除拖蓝部分

###### 4.1.3 Range.insertNode() ######

> 在Range的开始位置插入节点

### 4.2 背景色的取消 ###

由于需求中每种背景色只能设置一个，所以，想要取消某个背景色直接查找到对应元素，去掉背景色即可。。。  
此外，要注意在添加/取消背景色时尽量产生不要有多余的无意义的标签。

// 假设已找到了该元素
      span.insertAdjacentHTML('beforebegin',span.innerHTML);
      // 然后从父元素中删除span元素即可

###### 4.2.1 insertAdjacentHTML() ######

> `element.insertAdjacentHTML(position,text)`方法将指定的文本解析为 Element 元素，并将结果节点插入到DOM树中的指定位置。它不会重新解析它正在使用的元素，因此它不会破坏元素内的现有元素。这避免了额外的序列化步骤，使其比直接使用innerHTML操作更快。  
> 其中，参数`position`有4个取值，分别是beforebegin、afterbegin、beforeend、afterend。分别表示在元素的下图位置插入  
> ![在这里插入图片描述][2021062219461671.png]

###### 4.2.2 类似的方法 ######

*  element.insertAdjacentElement()，在元素指定位置插入HTML元素节点
 *  element.insertAdjacentText()，在元素指定位置插入文本

### 5、背景色不能交叉重叠 ###

> 最初，想将每个颜色区域的开始位置和结束位置保存起来， 新选择文本区域时再用当前所选的位置信息进行判断，交叉重叠则return

但是，现实是骨感的，，，这个方法还是有个很严重的问题。。。。文本选区的方向，，，， ，，，，从左向右选/从右向左选， anchorNode、focusNode是会不一样的，，，，，anchorOffset、focusOffset也会跟着受影响。。。

但是，并未找到鼠标拖拽方向的属性/方法，，尝试通过根据按下鼠标和松开鼠标的位置信息去对比计算。。但是，，这个位置信息是精确到像素级的，，，在选取文本时有稍微一点点的不稳手抖 会直接影响结果。。。。所以这个方法是坚决不可行的

**解决方法**

> 从拖蓝部分入手，如果能拿到拖蓝部分的HTML结构，判断是否包含element元素即可。

###### 5.1 Range.cloneContents() ######

> 返回一个 DocumentFragment，它是 Range 中所有的 Node 对象的副本。。

var documentFragment=Range.cloneContents();
      // 判断documentFragment中是否报告HTML元素节点，，，，如果包含 ，，就交叉重叠了。。。。。
      var count=documentFragment.childrenElementCount;

但是呢，还是有一种情况是判断不了的。。。。当拖蓝完全被报告与某个HTML元素时，，，按照需求是交叉重叠的了的，，但是，，拖蓝部分并不包含任务html元素。。所以只要手动将这种情况判断下即可。。

## 6、实现 插入图片至光标所在位置 ##

我们经常会发布评论、进行恢复、进行意见反馈等操作，，时常会在书写一些文字的同时配上一些图片、视频之类的。。。现在想要实现一个简单的编辑功能可以将图片插入至光标所在处。。。

> 实现方法很简单：使用Range.insertNode()即可实现

##### 6.1 首先，我们先实现一个简易版的，，在光标处插入指定的默认图片 #####

<div id="gg" contenteditable="true">https://developer.mozilla.org/zh-CN/docs/Web/API/DocumentFragment</div>
        <button id="btn">插入一个图片</button>

var gg = document.getElementById('gg')
            var btn = document.getElementById('btn');
            var sel, ran;
            gg.onmouseup = function () { 
                sel = window.getSelection();
                ran = sel.getRangeAt(0);
              
            }
            btn.onclick = function () { 
                var img = document.createElement('img');
                img.src = "./boyuanchong.jpg";
                ran.insertNode(img);
            }

##### 6.2 在光标处插入任意一张照片 #####

> 实现思路：使用一个fileHTML元素，实现图片的选择，将选择的文件赋值给img，将img插入到光标所在位置。。。。

<input type="file" id="file-input" />
    <div id='container' contenteditable="true">什么是“德尔塔”变异毒株？疫苗还有效吗？</div>

[2021062219461671.png]: /images/20221005/adde48944bfd4675b2a4f9b3cc95d402.png