Выберите диапазон текста в CKEditor из javascript

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

Это прекрасно работает, если это простой текст без разрыва строки. Если текст, который я хочу, чтобы выбрать после второй строки или отформатирован, я получаю следующее сообщение об ошибке:

Uncaught Error: IndexSizeError: DOM Exception 1

Что идет не так?

Answer 1

Я пересмотрел ваш код и изменил его «немного». Следующий код будет выбрать все вхождения слова «» в содержании редактора:

// 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 поддерживает выбор нескольких элементов и результат должен выглядеть следующим образом:

Я надеюсь, что этот пример поможет вам в решении проблемы.