如何更改富文本编辑器文本区域中的插入符号偏移量

How to change the caret offset in a rich text editor textarea?

本文关键字：文本 插入 符号 偏移量 编辑器 何更改 文本编辑 区域      更新时间：2023-09-26

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

因为html文本区域不是真正的textareadiv(它只是一个常规的div)，我不能使用常见的文本区域策略来移动插入符号。但是经过一些实验，我发现把它作为一个选择可以让我把它作为一个文本区域。

从我读到的改变插入符号偏移量的正确方法是Range.setStart()，但我不知道如何使用它。有人能帮我吗?

我已经设置了这个jsp。尝试(在Firefox中)将插入符号移动到偏移量27。然后编辑器的值将改变，插入符号将移动到偏移量0。但是，我如何移动插入符号，例如偏移35?

我已经更新了你的小提琴像你想要的工作。
这是我修改的部分:

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测试

相关文章：