如何获得正确的插入符号绝对位置

Question

我正在使用range.getBoundingClientRect获取插入符的位置，但是在按下end键时会给出错误的值。

目前，我有一个内容可编辑的div和一个插入符div：

<div id="editor" contenteditable="true">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sodales tellus nulla, quis viverra ipsum accumsan nec. Vivamus felis velit, dictum nec purus sed, placerat placerat libero. 
</div>
<div id="caret"></div>

我检测到何时选择更改以更新插入符号位置

document.addEventListener("selectionchange", function() {
  const rect = document.getSelection().getRangeAt(0).getBoundingClientRect();
  document.getElementById('caret').style.left = `${rect.left}px`;
  document.getElementById('caret').style.top = `${rect.top}px`;
})

当我按结束键时，我的插入符号将移至下一行的开头，而不是当前行的末尾。这是因为getBoundingClientRect给出了错误的值。

这是复制品：

https://jsfiddle.net/2dauymov/10/

我在使用Chrome 78。