javascript - 如何将插入符号设置为 contenteditable 中 Range 对象的最后一个字符？

Question

我很难弄清楚如何根据 Range 对象中的最后一个字符设置插入符号位置。

例如，我有 contenteditable，其中包含一些文本。

Hello world Test

然后我用鼠标突出显示文本部分(“wor”):

然后 mouseup 事件将获取选定的范围。

焦点消失后，所选的突出显示将消失。

现在，我的目标是将插入符号设置在“r”和“l”之间，如下图所示(范围的末尾)

到目前为止，我已经完成了选择和恢复部分的工作，但无法根据 Range 对象找出插入符号设置。

代码:

var node = this.element.find(".reContentArea")[0];
var range = document.createRange();

var sel = window.getSelection();

sel.removeAllRanges();
sel.addRange(range);

Answer 1

您可以使用focusOffset来获取选择结束的字符位置:

$('.reContentArea').on('mouseup', function() {
    var offset= window.getSelection().focusOffset 
})

在 contenteditable 元素 上设置插入符号位置时，我们可以使用 setStart(startNode, startOffset) 。正如您在此方法中看到的，我们需要指定节点以及该节点内的偏移量。

var editable = $('.reContentArea')[0],
    range = document.createRange(),
    sel = window.getSelection();    

range.setStart(editable.firstChild, offset);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);

我不清楚你想触发什么“将插入符号设置为”，但我已经用这个解决方案在这个jsfiddle上做了一个简单的点击事件。 .