Selection & Range
::: tip 关于
关于这篇笔记是我在学习 Slate
的事件对一些概念的理解及其从其他参考资料、博客 中学习到的,主要用来记录当时心得, 如果你也正好感兴趣,那就和我一起学习吧。Here we go
:::
Example Code
<p id="p">Example: <i>italic</i> and <b>bold</b></p>
Path Interface
export interface Point {
path: Path
offset: number
[key: string]: unknown
}
范围 (Range)
Range
表示一个包含节点与文本节点的一部分的 文档片段。俗称拖蓝。
export interface Range {
anchor: Point
focus: Point
[key: string]: unknown
}
属性
-
返回一个表示
Range
的起始位置和终止位置是否相同的布尔值
。 Range.commonAncestorContainer
只读返回完整包含
startContainer
和endContainer
的、最深一级的节点
。-
返回包含
Range
终点的节点
。 -
返回一个表示
Range
终点在endContainer
中的位置的数字。 -
返回包含
Range
开始的节点
。 -
返回一个表示
Range
起点在startContainer
中的位置的数字。
锚点 (Anchor)
anchor
指向用户开始选择的地方。
选区的 锚点 是该选区的起点,当您用鼠标框选一个选区的时候,锚点是你的鼠标按下瞬间所记录的那个点。随着用户拖动鼠标,锚点的位置不会随着改变。
焦点 (focus)
focus
指向用户结束选择的地方。
选区的 焦点 是该选区的终点,当您用鼠标框选一个选区的时候,焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标,焦点的位置会随着改变。
选区 (Selection)
Selection
表示当前用户选中的内容或插入符号的当前位置。
Slate@0.50+
中 Selection
的能力是通过 Range Interface
注入的。
export interface Editor {
// ...
selection: Range | null
}
属性
- anchorNode 只读
返回该选区起点所在的节点(Node
)。
- anchorOffset 只读
返回一个数字,其表示的是选区起点在 anchorNode
中的位置偏移量。
- 如果
anchorNode
是文本节点,那么返回的就是从该文字节点的第一个字开始,直到被选中的第一个字之间的字数(如果第一个字就被选中,那么偏移量为零)。 - 如果
anchorNode
是一个元素,那么返回的就是在选区第一个节点之前的同级节点总数。(这些节点都是anchorNode
的子节点)
- focusNode 只读
返回该选区终点所在的节点。
- focusOffset 只读
返回一个数字,其表示的是选区终点在 focusNode
中的位置偏移量。
- 如果
focusNode
是文本节点,那么选区末尾未被选中的第一个字,在该文字节点中是第几个字(从0开始计),就返回它。 - 如果
focusNode
是一个元素,那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。
- isCollapsed 只读
返回一个布尔值,用于判断选区的起始点和终点是否在同一个位置。
- rangeCount 只读
返回该选区所包含的连续范围的数量。
选择方向
向前选择(forward)
二者重叠时,即选区被折叠,用户视觉上看到的就是一个闪烁的光标。
向后选择(backward)
collapse
Selection.collapse()
方法可以收起当前选区到一个点。文档不会发生改变。如果选区的内容是可编辑的并且焦点落在上面,则光标会在该处闪烁。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function run (){
document.body.contentEditable = true
var body = document.getElementsByTagName("body")[0];
/* 将光标收起到文档body的开头 */
window.getSelection().collapse(body, 0);
}
</script>
</head>
<body>
<h1>这是一个段落</h1>
<p id="demo">这是一个段落</p>
<button type="button" onclick="run()">聚焦到body的第一个位置</button>
</body>
</html>