Athena

# Selection & Range

关于

关于这篇笔记是我在学习 Slate 的事件对一些概念的理解及其从其他参考资料、博客 中学习到的，主要用来记录当时心得, 如果你也正好感兴趣，那就和我一起学习吧。Here we go

# Example Code

<p id="p">Example: <i>italic</i> and <b>bold</b></p>
1

# Path Interface

export interface Point {
  path: Path
  offset: number
  [key: string]: unknown
}
1
2
3
4
5

# 范围 (Range)

Range 表示一个包含节点与文本节点的一部分的 文档片段。俗称拖蓝。

export interface Range {
  anchor: Point
  focus: Point
  [key: string]: unknown
}
1
2
3
4
5

range-p-2-b-3-range

# 属性

原生方法 详见 (opens new window), Slate 方法 详见

# 锚点 (Anchor)

anchor 指向用户开始选择的地方。

选区的 锚点 (opens new window) 是该选区的起点，当您用鼠标框选一个选区的时候，锚点是你的鼠标按下瞬间所记录的那个点。随着用户拖动鼠标，锚点的位置不会随着改变。

# 焦点 (focus)

focus 指向用户结束选择的地方。

选区的 焦点 (opens new window) 是该选区的终点，当您用鼠标框选一个选区的时候，焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标，焦点的位置会随着改变。

# 选区 (Selection)

Selection 表示当前用户选中的内容或插入符号的当前位置。

Slate@0.50+ 中 Selection 的能力是通过 Range Interface 注入的。

export interface Editor {
  // ...
  selection: Range | null
}
1
2
3
4

range-example-p-0-1

# 属性

返回该选区起点所在的节点（Node (opens new window)）。

返回一个数字，其表示的是选区起点在 anchorNode (opens new window) 中的位置偏移量。

  1. 如果 anchorNode 是文本节点，那么返回的就是从该文字节点的第一个字开始，直到被选中的第一个字之间的字数（如果第一个字就被选中，那么偏移量为零）。
  2. 如果 anchorNode 是一个元素，那么返回的就是在选区第一个节点之前的同级节点总数。(这些节点都是 anchorNode 的子节点)

返回该选区终点所在的节点。

返回一个数字，其表示的是选区终点在 focusNode (opens new window) 中的位置偏移量。

  1. 如果 focusNode 是文本节点，那么选区末尾未被选中的第一个字，在该文字节点中是第几个字（从0开始计），就返回它。
  2. 如果 focusNode 是一个元素，那么返回的就是在选区末尾之后第一个节点之前的同级节点总数。

返回一个布尔值，用于判断选区的起始点和终点是否在同一个位置。

返回该选区所包含的连续范围的数量。

# 选择方向

# 向前选择(forward)

二者重叠时，即选区被折叠，用户视觉上看到的就是一个闪烁的光标。

selection-direction-forward

# 向后选择(backward)

selection-direction-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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 参考资料

MDN - Selection (opens new window)

MDN - Range (opens new window)

Selection and Range (opens new window)

DOM 规范: 范围(Range) (opens new window)

选择(Selection) API (opens new window)

HTML 规范: 用于文本控件选择的 API (opens new window)

← 贡献 →