在CKEditor-4中遍历DOM节点

Question

我们有一个这个CKEditor插件上的bug，一个通用的解决方案是喜欢这个，它只对DOM的终端文本节点应用泛型字符串过滤器。

问题：如何(需要代码示例)通过CKEditor-4工具(如CKEDITOR.dom.range )遍历选择节点(editor.getSelection())

Answer 1

第一步是从当前的选择中获取范围。要做到这一点，只需打电话：

var ranges = editor.getSelection().getRanges();

这给出了一个范围数组，因为理论上(这一理论只有Firefox才能证明)一个选择可以包含多个范围。但在99%的现实世界中，你只需处理第一个案例，而忽略其他案例。所以你有range了。

现在，在此范围内迭代每个节点的最简单方法是使用CKEDITOR.dom.walker。例如，以这种方式使用：

var walker = new CKEDITOR.dom.walker( range ),
    node;

while ( ( node = walker.next() ) ) {
    // Log values of every text node in range.
    console.log( node.type == CKEDITOR.NODE_TEXT && node.getText() );
}

但是，区域边界上的文本节点存在问题。考虑以下范围：

<p>[foo<i>bar</i>bo]m</p>

这将记录：foo、bar和bom。是的-整个bom，因为它是一个节点，而walker不修改DOM (文档中有一个bug )。

因此，您应该检查想要转换的每个节点是否等于range的startContainer或endContainer，如果是的话-只转换它的那一部分，即在范围内。

Note：我不知道walker的内部结构，我也不确定您是否可以在迭代DOM的同时修改DOM。我建议首先缓存节点，然后进行更改。