<paragraph>
有两个文本节点:"Foo "和"bar"。如果你知道native DOM Ranges的巩固走原理,你可能会问:“但是,如果所选内容位于两个文本节点的边界,那么它是锚定在左侧,右侧还是包含在元素中?”
这个确实是另一个跟DOM APIs
相关的问题。不仅元素外部和内部的位置在视觉上都是相同的,而且还可以将它们锚定在文本节点的内部或外部(如果位置在文本节点边界处)。在实现editing algorithms
时,这会造成极大的复杂性。
为了避免此类麻烦,并使真正的协作编辑(collaborative editing
)成为可能,CKEditor 5使用索引(indexes
)和偏移量(offsets
)的概念。索引与节点(元素和文本节点)有关,而偏移与位置有关。例如,在以下结构中:
据说内部<paragraph>
有两个文本节点:"Foo "
和"bar"
。如果您知道本机DOM Ranges的工作原理,那么您可能会问:“但是,如果所选内容位于两个文本节点的边界,那么它是锚定在左侧,右侧还是包含在元素中?”
确实,这是DOM API的另一个问题。不仅元素外部和内部的位置在视觉上都是相同的,而且还可以将它们锚定在文本节点的内部或外部(如果位置在文本节点边界处)。在实施编辑算法时,所有这些都会带来极大的复杂性。
为了避免此类麻烦,并使真正的协作编辑成为可能,CKEditor 5使用索引和偏移量的概念。索引与节点(元素和文本节点)有关,而偏移与位置有关。例如,在以下结构中:
<paragraph>
"Foo "
<image></image>
"bar"
</paragraph>
"Foo "
文本节点是其父节点(paragraph
标签)的下标(index
)为0
,<image></image>
的下标(index
)为1
,"bar"
的下标为2
。另一方面,父节点<paragraph>
中,偏移量x
为:
Offset | Position | Node |
---|---|---|
0 |
<paragraph>^Foo <image></image>bar</paragraph> |
"Foo " |
1 |
<paragraph>F^oo <image></image>bar</paragraph> |
"Foo " |
4 |
<paragraph>Foo ^<image></image>bar</paragraph> |
<image> |
6 |
<paragraph>Foo <image></image>b^ar</paragraph> |
注:其中文本节点偏移量是文本的长度,非文本节点偏移量为1。
Positions, ranges and selections
ckeditor5的edting engine
还定义了三个操作(operate
)偏移量(offsets
)的级别:
- 一个
Position
实例包含一个偏移量数组(称为“path”)。请参阅Position#path
API文档中的示例,以更好地了解路径的工作方式。
举例(foo
和bar
是text node
):
ROOT
|- P before: [ 0 ] after: [ 1 ]
|- UL before: [ 1 ] after: [ 2 ]
|- LI before: [ 1, 0 ] after: [ 1, 1 ]
| |- foo before: [ 1, 0, 0 ] after: [ 1, 0, 3 ]
|- LI before: [ 1, 1 ] after: [ 1, 2 ]
|- bar before: [ 1, 1, 0 ] after: [ 1, 1, 3 ]
ROOT
|- P
|- UL
|- LI
| |- f^o|o ^ has path: [ 1, 0, 1 ] | has path: [ 1, 0, 2 ]
|- LI
|- b^a|r ^ has path: [ 1, 1, 1 ] | has path: [ 1, 1, 2 ]
网友评论