细细品味Selection模型, 揭开选区操作背后的奥秘

前端

2023-09-16 06:18:25

Selection模型简介

Selection模型是富文本编辑器框架中用于表示选区状态的数据结构。它由三个部分组成：

Point：表示选区的起点或终点。
Range：表示选区的范围，由两个Point组成。
Selection：表示当前选区的状态，包括选区范围和选区是否处于活动状态。

Point模型

Point模型表示选区的起点或终点。它包含两个属性：

key：表示Point所在的Text节点的key。
offset：表示Point在Text节点中的偏移量。

Range模型

Range模型表示选区的范围，由两个Point组成。它包含两个属性：

start：表示选区的起点。
end：表示选区的终点。

Selection模型

Selection模型表示当前选区的状态，包括选区范围和选区是否处于活动状态。它包含三个属性：

range：表示选区的范围。
isCollapsed：表示选区是否处于折叠状态。
anchorNode：表示选区的锚点所在的Text节点。
anchorOffset：表示选区的锚点在Text节点中的偏移量。

Selection模型的实现

Selection模型通常通过DOM Selection API来实现。DOM Selection API提供了丰富的API，可以方便地获取和修改选区状态。

// 获取选区对象
const selection = window.getSelection();

// 获取选区范围
const range = selection.getRangeAt(0);

// 获取选区起点和终点
const start = range.startContainer;
const end = range.endContainer;

// 获取选区锚点
const anchorNode = selection.anchorNode;

// 获取选区锚点偏移量
const anchorOffset = selection.anchorOffset;