CKEditor5——模型理解(五:Position, Range, Selection)

时间:2022-06-01 12:42:44

今天我们继续学习CK5中模型的一些知识,主要包括:Position, Range, Selection

CKEditor5——模型理解(五:Position, Range, Selection)

首先,我们需要知道:position表示模型树中的一个位置。

模型的位置有两部分组成:root,path。即位置由其根和该根中的路径表示。位置基于偏移量,而不是索引。这意味着两个文本节点 foo 和 bar 之间的位置偏移为 3,而不是 1。由于模型中的位置由位置根和位置路径表示,因此可以创建不存在的位置。这个要求对于操作转换算法很重要。此外,保存在文档历史记录中的操作正在存储应用这些操作时正确的位置(和范围),但在文档更改后可能不正确。

当对模型发生更改时,即使位置路径没有更改,位置父级也可能发生更改。请记住,如果某个位置导致不存在的元素、父元素和其他一些属性和方法将引发错误。在大多数情况下,路径错误的位置是由代码错误引起的,但有时需要它,如上所述。

Position属性

1、index

位置偏移量转换为位置父节点中的索引。它等于该位置之后的节点的索引。如果位置放置在文本节点中,则位置索引等于该文本节点的索引。

为了说明这个属性,我用一个例子来说明:

const selection = model.document.selection;
const first = selection.getFirstPosition();
console.log('first.index:',first.index);

CKEditor5——模型理解(五:Position, Range, Selection)

CKEditor5——模型理解(五:Position, Range, Selection)

CKEditor5——模型理解(五:Position, Range, Selection)

此时选择的位置只要在abc节点中或者之前,那么这个索引的值都是0;当这个选择的位置在abc以后以及哈哈哈之前,此时这个值就是为1。

CKEditor5——模型理解(五:Position, Range, Selection)

CKEditor5——模型理解(五:Position, Range, Selection)

这里有一个需要注意的是,当选择放置到最后位置的时候,此时的index的值变成了3。

CKEditor5——模型理解(五:Position, Range, Selection)

CKEditor5——模型理解(五:Position, Range, Selection)

2、isAtEnd

位置是否在父元素的最后,如果是最后,返回true,否则返回false

3、isAtStart

位置是否在父元素的最前,如果是最前,返回true,否则返回false

4、nodeBefore

直接在此位置之前的节点,如果此位置在文本节点中,则为 null。

5、nodeAfter

直接在此位置之后的节点,如果此位置在文本节点中,则为 null。

6、offset

此位置在其父级中的偏移量。它等于位置路径中的最后一项。

7、parent

此位置的父元素。(这里需要注意的是元素而不是文本节点)

8、path

树中节点的位置。路径包含偏移量,而不是索引。如果该节点的 offsetSize 大于 1,则可以将位置放置在该节点之前、之后或中。位置路径中的项目是位置祖先的起始偏移量,从直接根子节点开始,一直到其父节点中的位置偏移量。

这个属性的具体描述可以参考官方文档

9、root

指向根元素

10、stickness

这个属性在高级应用的时候比较多,具体说明请参考官方文档

insert. Position is at | and nodes are inserted at the same position, marked as ^:

- sticks to none:           <p>f^|oo</p>  ->  <p>fbar|oo</p>
- sticks to next node:      <p>f^|oo</p>  ->  <p>fbar|oo</p>
- sticks to previous node:  <p>f|^oo</p>  ->  <p>f|baroo</p>


Move. Position is at | and range [oo] is moved to position ^:

- sticks to none:           <p>f|[oo]</p><p>b^ar</p>  ->  <p>f|</p><p>booar</p>
- sticks to none:           <p>f[oo]|</p><p>b^ar</p>  ->  <p>f|</p><p>booar</p>

- sticks to next node:      <p>f|[oo]</p><p>b^ar</p>  ->  <p>f</p><p>b|ooar</p>
- sticks to next node:      <p>f[oo]|</p><p>b^ar</p>  ->  <p>f|</p><p>booar</p>

- sticks to previous node:  <p>f|[oo]</p><p>b^ar</p>  ->  <p>f|</p><p>booar</p>
- sticks to previous node:  <p>f[oo]|</p><p>b^ar</p>  ->  <p>f</p><p>boo|ar</p>

11、textNode

返回放置此位置的文本节点实例,如果此位置不在文本节点中,则返回 null。

 

position方法

1、compareWith(otherPosition)

比较当前位置和参数位置,返回值有四种情况:

before;after;same;different;

指示此位置是否与给定位置“之前”或“之后”或“相同”的标志。如果位置在不同的根中,则返回“不同”标志。