如何在包含内容的可编辑div中设置插入符号位置？

Question

我需要一个脚本来将contenteditable div的插入符号放在最后键入的字符之后。

仅键入一个字符是行不通的，因为我还有其他脚本处理CJK字符转换，因此在每个innerHTML事件中都更改了div的onInput（因此每次都重置插入符号的位置）

我正在使用此SO answer中的代码来获取插入符号在contenteditable div内部的当前位置。

我将根据上面的代码生成的插入符号位置存储在浏览器的localStorage中。

每当我需要将插入符号位置设置在所需位置时，我都会调用以下函数，其中pos是存储的值+ 1：

  function setCursor(pos) {
    var tag = document.getElementById("editableDiv");
    var setpos = document.createRange();
    var set = window.getSelection();
    setpos.setStart(tag.childNodes[0], pos);
    setpos.collapse(true);
    set.removeAllRanges();
    set.addRange(setpos);
    tag.focus();
  }

对于div中的所有文本，直到第一个孩子，一切都工作正常。从此以后，它不再起作用，并且在控制台中出现以下错误：

Uncaught DOMException: Index or size is negative or greater than the allowed amount

我还尝试将this other similar SO post中的function showCaretPos()的{​​{1}}更改。但是，再次，它从第一个孩子开始停止工作，这次出现错误function SetCaretPosition(el, pos)。

无论子元素是否存在，我如何解决此问题？

Here is my code。