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

Question

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

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

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

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

Answer 1

Я обновил вашу скрипку, чтобы работать так, как вы хотите.
Это часть, которую я изменил:

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 создать диапазон текстовых символов, а не элемент HTMLE. Это было для этого, ваш Range.setStart(), не имел никакого эффекта, это было "ранжирование" divs!

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

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

---

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