3

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]]);
}

改行なしのプレーンテキストであれば問題なく動作します。選択したいテキストが 2 行目以降にある場合、または書式設定されている場合、次のエラーが発生します。

キャッチされないエラー: IndexSizeError: DOM 例外 1

何がうまくいかないのですか？

4

1 に答える 1

6

私はあなたのコードを再検討し、「少し」変更しました。次のコードは、エディターの内容で単語"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 のみで、結果は次のようになります。

Firefox での複数選択

この例が問題の解決に役立つことを願っています。

于 2013-06-25T12:13:15.990 に答える