我们 在这个 CKEditor 插件上有一个错误,一个通用的解决方案就是这样,只将通用字符串过滤器应用于 DOM 的终端文本节点。
问题:如何(需要代码示例)通过 CKEditor-4 工具(如CKEDITOR.dom.range)遍历选择节点( ) ?editor.getSelection()
我们 在这个 CKEditor 插件上有一个错误,一个通用的解决方案就是这样,只将通用字符串过滤器应用于 DOM 的终端文本节点。
问题:如何(需要代码示例)通过 CKEditor-4 工具(如CKEDITOR.dom.range)遍历选择节点( ) ?editor.getSelection()
第一步是从当前选择中获取范围。为此,只需调用:
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 时对其进行修改。我建议首先缓存节点然后进行更改。