敲碎时间,铸造不朽的个人专栏
上一篇

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

广告
选中文字可对指定文章内容进行评论啦,→和←可快速切换按钮,绿色背景文字可以点击查看评论额。
大纲

今天我们继续学习CK5中模型的一些知识,主要包括: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);

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

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

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;

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

 

2、findAncestor(parentName)

返回给定名称的父元素。如果位置不在所需的父级内,则返回 null。

onst first = selection.getFirstPosition();
console.log('selection.parent:',first.findAncestor('paragraph'));

3、getAncestors()

返回此位置的祖先数组,即此位置的父级及其祖先。

onsole.log('selection.parents:',first.getAncestors());

4、getCommonAncestor( position ) → Element | DocumentFragment | null

返回一个 Element 或 DocumentFragment,它是两个位置的共同祖先。这两个位置的根必须相同。

5、getCommonPath( position ) → Array.<Number>

返回两个相同位置路径的切片。这两条路径的根必须相同。这种方法可以安全地用于不存在的位置(例如在操作转换期间)。

6、getLastMatchingPosition( skip, options ) → Position

使用 TreeWalker 获取与回调匹配的最远位置。

LastMatchingPosition( value => value.type == 'text' );
// <paragraph>[]foo</paragraph> -> <paragraph>foo[]</paragraph>

getLastMatchingPosition( value => value.type == 'text', { direction: 'backward' } );
// <paragraph>foo[]</paragraph> -> <paragraph>[]foo</paragraph>

getLastMatchingPosition( value => false );
// Do not move the position.

7、getParentPath() → Array.<Number>

返回此位置父级的路径。父路径等于位置路径,但没有最后一项。  这种方法可以安全地用于不存在的位置(例如在操作转换期间)。

8、getShiftedBy( shift ) → Position

返回一个新的 Position 实例,它具有相同的父级,但它的偏移量按移位值移动(可以是负值)。这种方法可以安全地用于不存在的位置(例如在操作转换期间)。

9、isTouching( otherPosition ) → Boolean

检查此位置是否接触给定位置。当它们之间的范围内没有文本节点或空节点时,位置接触。从技术上讲,这些位置并不相同,但在许多情况下,它们非常相似甚至无法区分。

版权声明:著作权归作者所有。

X

欢迎加群学习交流

联系我们