dom - 在 CKEditor-4 中遍历 DOM 节点

Question

我们 在这个 CKEditor 插件上有一个错误，一个通用的解决方案就是这样，只将通用字符串过滤器应用于 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。是的 - whole bom，因为它是单个节点，并且walker 不会修改 DOM（文档中有一个错误）。

因此，您应该检查要转换的每个节点是否等于范围startContainer，或者endContainer如果是，则仅转换范围内的那部分。

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