CKEditor插件-为所选文本迭代多个DOM元素的正确方法

CKEditor plugin - Proper way to iterate multiple DOM elements for selected text

本文关键字：元素 DOM 方法 迭代 插件 文本 CKEditor      更新时间：2023-09-26

我在CKEditor插件中选择了以下文本。

monkey needs <span answer="banana">food</span> today

我可以使用以下代码检索banana

editor.on( 'dialogShow', function( dialogShowEvent )
{
    var selection = editor.getSelection();
    if (selection) {
        var selectedElement = selection.getSelectedElement();
        // http://ckeditor.com/forums/Support/GetSelectedElement-returns-null-IE-and-Chrome-BUG
        if (selectedElement == null) {
            // I have no idea whether this is a correct workaround? Just pray...
            selectedElement = selection.getStartElement();
        }
        if (selectedElement == null) {
            return;
        }
        // Yes :)
        var banana = selectedElement.getAttribute('answer');

然而，如果我们选择的文本是，代码就会中断

monkey needs <span answer="banana"><strong>food</strong></span> today

我可以知道迭代所选文本的DOM元素的正确方法是什么吗？我希望我们有类似getSelectedElements（复数）的东西。但是，我找不到。

如果要检查从selection.getStartElement()到editor.editable()的所有元素，则可以使用dom.elementPath。

var elementPath = editor.elementPath();
var answerElement = elementPath.contains( function( el ) {
    return el.hasAttribute( 'answer' );
} );

另一方面，如果您希望按DFS顺序（源顺序）遍历DOM树，则需要使用dom.walker:

var range = sel.getRanges()[ 0 ],
    walker = new CKEDITOR.dom.walker( range ),
    node;
while ( ( node = walker.next() ) ) {
    // .. do something
}

根据具体情况，你可能想做十几件其他事情，所以我无法描述所有这些。在dom.range类、dom.element或dom.iterator中有许多方法。

相关文章：