富文本编辑器开发系列——textRange对象API详解

富文本编辑器开发系列——`textRange`对象`API`详解

textRange对象简介

在IE9浏览器和更早版本的浏览器中，是没有提供用来表示选区的Range对象的API的，但是它们依旧有可编辑区域的相关能力，是因为它们提供了另一个对象接口：textRange对象

textRange对象属性与API概览

富文本编辑器开发系列7——textRange对象详解 - 图1

textRange 属性详解

我们先直观地看一下这些属性。

我们有下面一段代码：

<body>
    <div onscroll="UpdateInfo();" style="padding: 20px; left: 50px; border:1px solid yellow; width:400px; overflow:scroll; position: relative;">
        <div>Select some content within this field.</div>
        <div id="cc">The coordinates of the selected content's boundary rectangle</div>
        <div>are visible in the field below</div>
    </div>
</body>

再来看页面中选中一个选区后各个属性所指向的

从上面的思维导图中，我们可以看到这些属性的简要介绍。但是还有一些要注意的点

祖先元素中离它最近的定位元素

这其实指的就是的元素的offsetParent 属性指向的元素，也就是说对于当前选中区域所在的textRange对象，会一层一层往上找它的祖先元素，遇到的第一个定位元素。

我们可以这样理解，获取到包含元素A的所有祖先元素，然后去除掉这些元素中的非定位元素，剩下的嵌套结构中元素A的父级元素就是它的 offsetParent 属性所指向的元素。

<div class="1" style="position: fixed;">
  <div class="2">
      <div class="3" style="position: relative;">
          <div class="4" >
              <div class="5" style="position: absolute;">
                      <div class="6" >
                          <div class="A">
                      这个是元素A  
                 </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
// 去除非定位元素
<div class="1" style="position: fixed;">
      <div class="3" style="position: relative;">
              <div class="5" style="position: absolute;">
                          <div class="A">
                      这个是元素A  
                 </div>
                </div>
        </div>
</div>
// 元素A的 offsetParent 指向的元素就是 className为 “5”的元素

这个属性，有以下原则：

如果元素自身的定位方式为fixed 或者display为node，则它的offsetParent为 null；
如果元素的祖先元素里没有定位元素，并且元素本身没有定位，此时元素的offsetParent 为最近的table/td/th或body元素
如果元素的祖先元素里没有定位元素，而元素定位为absolute或relative ，分两种情况：
- IE7以上和其它现代浏览器中，此时元素的offsetParent 为最近的table/td/th或body元素；
- IE7 以下版本浏览器中，此时元素的 offsetParent 为最近的table/td/th或html元素；
如果元素的祖先元素里有定位元素，而元素自身不是fixed定位，则元素的offsetParent 为离它最近的有定位的祖先元素。

知道了以上规则，我们就更好理解textRange对象的offsetLeft属性与offsetTop属性了。

下面来看下这些属性的表现。

本文以下代码示例全部需要在IE9以下版本浏览器中才能正常运行
运行效果：

富文本编辑器开发系列7——textRange对象详解 - 图2

我们拖动后选择的拖蓝区域形成了一个矩形区域，而textRange 对象的几个属性都和这个矩形区域有关：

boundingLeft：矩形区域左端到父窗口左边框右侧的坐标距离
boundingTop：矩形区域上端到父窗口上边框下侧的坐标距离
boundingWidth ：矩形区域的宽度
boundingHeight：矩形区域的高度
offsetLeft：矩形区域左端到它最近的定位父级元素的左边框的右侧的距离（这里也是body，所以与left值相等）
offsetTop：矩形区域上端到它最近的定位父级元素的上边框的下侧的距离（这里也是Body, 所以与 top值相等）

方法

`collapse(start)` 闭合拖蓝

将拖蓝范围的起点移动到终点，反之亦然，同range

示例：

富文本编辑器开发系列7——textRange对象详解 - 图3

示例说明：

我们选中了一个选区‘button is released’，当我们释放鼠标时触发了事件，该事件调用了collapse方法将选区向终点闭合了，为了证明，我们在调用方法后，立即插入了一个按钮的内容，证明插入位置是选区终点处。

`compareEndPoints` 比较拖蓝与指定对象

语法：object.compareEndPoints(type, rangeToCompare);

说明：比较另一个拖蓝对象与该拖蓝对象的两个端点的位置关系

参数：

type：比较哪两个端点
- EndToEnd: 当前拖蓝的终点与目标对象的终点
  - EndToStart: 当前拖蓝的终点与目标对象的起点
  - StartToEnd：当前拖蓝的起点与目标对象的终点
  - StartToStart：当前拖蓝的起点与目标对象的起点
rangeToCompare：要比较的目标拖蓝对象

返回值：

-1：第一个点在第二个点前面
0：两个点在同一个位置
1：第一个点在第二个点后面

示例
示例说明：我们的目标对象是文本中加粗的部分 ‘bold text’ ，而当前拖蓝对象就是我们鼠标拖动选区的范围，每一次选取，都会触发比较端点的方法，根据该方法返回的值，我们就可以判断出当前拖蓝与目标对象的位置关系。

`duplicate()` 克隆拖蓝副本

语法： object.duplicate();

说明：返回一个当前拖蓝对象的副本，同 range对象的 cloneRange方法

前端——富文本编辑器专栏

富文本编辑器开发系列7——textRange对象详解

富文本编辑器开发系列——`textRange`对象`API`详解

textRange对象简介

textRange对象属性与API概览