在CKEditor-4中遍历DOM节点

我们有一个通用的解决方案，即只对DOM的终端文本节点应用通用字符串过滤器

---

问题：如何（需要代码示例）通过CKEditor-4工具（如？

）遍历选择节点（

editor.getSelection（）

），第一步是从当前选择中获取范围。要做到这一点，请拨打：

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

这将为您提供一个范围数组，因为理论上（这一理论只有Firefox证明）一个选择可以包含多个范围。但在99%的现实世界中，你可以只处理第一个而忽略另一个。所以你有了

范围

现在，在这个范围内迭代每个节点的最简单方法是使用。例如，可以这样使用它：

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>

[foobarbo]m

这将记录：

foo

、

bar

和

bom

。是-整个

bom

，因为它是单个节点，walker不修改DOM（文档中有一个bug）

因此，您应该检查要变换的每个节点是否等于范围的

startContainer

或

endContainer

，如果是，则只变换范围内的部分

---

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

第一步是从当前选择中获取范围。要做到这一点，请拨打：

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

这将为您提供一个范围数组，因为理论上（这一理论只有Firefox证明）一个选择可以包含多个范围。但在99%的现实世界中，你可以只处理第一个而忽略另一个。所以你有了

范围

现在，在这个范围内迭代每个节点的最简单方法是使用。例如，可以这样使用它：

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>

[foobarbo]m

这将记录：

foo

、

bar

和

bom

。是-整个

bom

，因为它是单个节点，walker不修改DOM（文档中有一个bug）

因此，您应该检查要变换的每个节点是否等于范围的

startContainer

或

endContainer

，如果是，则只变换范围内的部分

---

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

非常感谢！关于

walker

问题。。。哼另一种方法是使用DOM-2标准Javascript方法：如何获得编辑（选定）文本的DOM？我们可以使用XPath（

//text（）

）或

document.querySelector

等来迭代所有文本节点。。。并直接修改（按照您的建议进行迭代后）nodeValue或textContent属性。。。如何获取XHTML（如DOM

saveXML

）？有一个

selection.getSelectedHTML（）

要替换

selection.getSelectedText（）

？很抱歉，我不理解您的问题。这里的主要子问题是关于避免walker（这不是一种安全的方法！），并使用另一种更具价值的方法，可能是Javascript原生DOM方法。。。因此，子问题是：如何从选择中获得“真正的DOM”对象？如果我有一个“纯DOM节点”（不是CKEditor的扩展类），我可以使用传统的标准Javascript进行遍历。当我按照您的建议尝试使用

walk

实现时，我看不到如何修改节点：不显示

getText（）

，这是可行的，方法也不是我需要的“putText”。非常感谢！关于

walker

问题。。。哼另一种方法是使用DOM-2标准Javascript方法：如何获得编辑（选定）文本的DOM？我们可以使用XPath（

//text（）

）或

document.querySelector

等来迭代所有文本节点。。。并直接修改（按照您的建议进行迭代后）nodeValue或textContent属性。。。如何获取XHTML（如DOM

saveXML

）？有一个

selection.getSelectedHTML（）

要替换

selection.getSelectedText（）

？很抱歉，我不理解您的问题。这里的主要子问题是关于避免walker（这不是一种安全的方法！），并使用另一种更具价值的方法，可能是Javascript原生DOM方法。。。因此，子问题是：如何从选择中获得“真正的DOM”对象？如果我有一个“纯DOM节点”（不是CKEditor的扩展类），我可以使用传统的标准Javascript进行遍历。当我按照您的建议尝试使用

walk

实现时，我看不到如何修改节点：不显示

getText（）

，这是可行的，方法也不是“putText”，这个问题的答案与这个问题的答案相互配合