如何更改富文本编辑器 textarea 中的插入符号偏移量？答案

【问题标题】：How to change the caret offset in a rich text editor textarea?如何更改富文本编辑器 textarea 中的插入符号偏移量？
【发布时间】：2015-10-15 16:45:21
【问题描述】：

我有一个wysihtml 富文本编辑器。如果满足某些条件，我想更改插入符号的偏移量。

因为 wysithtml textarea 并不是真正的 textarea div（它只是一个常规 div），所以我不能使用常见的 textarea 策略来移动插入符号。但经过一些实验后，我发现将其视为Selection 可以让我将其用作文本区域。

从我读到的更改插入符号偏移的正确方法是Range.setStart()，但我不知道如何使用它。谁能帮帮我？

我已设置this jsfiddle。尝试（在 Firefox 中）将插入符号移动到偏移量 27。然后编辑器的值将改变，插入符号将移动到偏移量 0。但是我如何将插入符号移动到例如偏移 35？

【问题讨论】：

标签： javascript textarea selection caret wysihtml5

【解决方案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 来创建一系列文本字符，而不是 HTMLElement。就是为了那个，你的Range.setStart()，没有效果，它是'范围'div！

在您的示例 textarea 中是一个 div，您需要在其中找到每个 textNode 并与它们进行交互。
在上面的代码中range.endContainer.lastChild 是一个textNode （实际上是textarea 的lastChild）。

希望对你有帮助！

用 Firefox 测试

【讨论】：