Question

我在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（Plural）的东西。但是，我找不到一个。

Answer 1

如果您想检查从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。

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

1 个答案: