Как изменить смещение каретки в текстовом поле с расширенным текстовым редактором?

Question

У меня есть текстовый редактор wysihtml. Если выполняются определенные условия, я хочу изменить смещение каретки.

Поскольку wysithtml textarea на самом деле не является textarea div (это просто обычный div), я не могу использовать общие стратегии textarea для перемещения каретки. Но после некоторых экспериментов я выяснил, что обработка его как Selection позволяет мне работать с ним как текстовое поле.

Из чего я прочитал правильный метод изменения смещения каретки - Range.setStart(), но я не могу понять, как его использовать. Кто может мне помочь?

У меня есть this jsfiddle. Попробуйте (в Firefox) переместить курсор на смещение 27. Тогда значение редактора изменится, и каретка переместится на смещение 0. Но как перемещать каретку, например, смещение 35?

Answer 1

Я обновил fiddle, чтобы работать так, как вы хотите.
Это часть я модифицирована:

if (offsets.start_offset == 27) { 
    editor.setValue("This is first line.<br>This is another second line.", true); 

    /* START OF MODIFICATION */ 

     var range = window.getSelection().getRangeAt(0); 
     range.selectNodeContents(textarea); 

     var fromPos = 27; 
     var lenTotal = (textarea.textContent || textarea.innerText).length; 
     var lenCurTextNode = range.endContainer.lastChild.nodeValue.length; 
     var lenNewWord= 'another '.length ; 

     var newPos = (fromPos - (lenTotal - lenCurTextNode)) + lenNewWord; 


     range.setStart(range.startContainer.lastChild , newPos); 
     range.setEnd(range.endContainer.lastChild , newPos); 

    /* END OF MODIFICATION */ 

     var offsets = getOffsets(textarea); 
    console.log("I want offsets.start_offset to be 35, but it is " + offsets.start_offset) 
    } else { 
    console.log("Offset is from " + offsets.start_offset + " to " + offsets.end_offset); 
    } 

Вы должны иметь дело с textNode, чтобы создать ряд текстовых символов и не Whith в HTMLElement. Это было для вас, ваш Range.setStart(), не имел никакого эффекта, это были «диапазоны» div!

В вашем примере textarea - это div, в котором вам нужно найти каждый textNode и взаимодействовать с ними.
В приведенном выше коде range.endContainer.lastChild есть текстNode (на самом деле lastChild textarea).

Надеюсь, это вам поможет!

---

Протестировано с Firefox