如何在富文本編輯器textarea中更改插入標記的偏移量？

Question

我有一個wysihtml RTF編輯器。 如果滿足某些條件，我想更改插入符號的偏移量。

因為wysithtml textarea實際上不是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才能創建一系列文本字符，而不必使用HTMLElement。 為此，您的Range.setStart()無效，它正在“調整” div的范圍！

在示例textarea中是一個div，您需要在其中查找每個textNode並與其進行交互。
在上面的代碼中range.endContainer.lastChild是一個textNode （實際上是textarea的lastChild） 。

希望這個能對您有所幫助 ！

---

經過Firefox測試