从javascript在CKEditor中选择一个文本范围

Question

我想在 CKEditor 中选择一个特定的文本。我使用了以下内容：

var sel = editor.getSelection();

var element = sel.root;
console.log(element);
sel.selectElement(element);
var findString = 'foobar';
var ranges = editor.getSelection().getRanges();
var startIndex = element.getHtml().indexOf(findString);

if (startIndex != -1) {
    ranges[0].setStart(element.getFirst(), startIndex);
    console.log(element.getFirst() +" - "+ startIndex);
    console.log(element.getFirst() +" - "+ startIndex + findString.length);
    ranges[0].setEnd(element.getFirst(), startIndex + findString.length);
    sel.selectRanges([ranges[0]]);
}

如果它是没有换行符的纯文本，它工作正常。如果我要选择的文本在第二行之后或已格式化，则会出现以下错误：

未捕获的错误：IndexSizeError：DOM 异常 1

出了什么问题？

Answer 1

我重新访问了您的代码并“稍微”更改了它。以下代码将选择编辑器内容中所有出现的单词“the”：

// Note: your instance name may differ.
var editor = CKEDITOR.instances.editor1, 
    selection = editor.getSelection(),
    root = selection.root,
    textNodes = [],
    ranges = [],
    range, text, index;

function getTextNodes( element ) {
    var children = element.getChildren(),
        child;

    for ( var i = children.count(); i--; ) {
        child = children.getItem( i );
        if ( child.type == CKEDITOR.NODE_ELEMENT ) 
            getTextNodes( child );
        else if ( child.type == CKEDITOR.NODE_TEXT )
            textNodes.push( child );
    }
}

// Recursively search for text nodes starting from root.
// You may want to search a specific branch starting from other element.
getTextNodes( root ); 

// Iterate over found text nodes. If some contains
// phrase "the", create a range that selects this word.
for ( i = textNodes.length; i--; ) {
   text = textNodes[ i ];
   index = text.getText().indexOf( 'the' );
   if ( index > -1 ) {
      range = editor.createRange();
      range.setStart( text, index );
      // Note: 3 is fixed length of "the". You may want to change it.
      range.setEnd( text, index + 3 ); 
      ranges.push( range );
   }  
}

// Select all ranges "containing" phrase "the".
selection.selectRanges( ranges );

请注意，如果您在 Chrome 或 IE 中运行此代码，则只会选择第一次出现。只有 Firefox 支持多选，结果应该是这样的：

我希望这个例子能帮助你解决问题。