如何在 Chrome/Safari 中将光标移动到 contenteditable div 中的下一个元素？

我有逻辑在 contenteditable div 中插入标签。我想在插入后将光标设置到以下元素的开头。我必须执行此操作的代码是：

function insertNodeAtCaret(node) {
if(typeof window.getSelection !== 'undefined')
{
    var sel = window.getSelection();
    if(sel.rangeCount)
    {
        var rng = sel.getRangeAt(0);
        rng.collapse(false);
        rng.insertNode(node);

        // The following doesn't work in Chrome or Safari
        node = node.nextSibling;
        rng.setEndAfter(node);
        rng.setStartAfter(node);
        rng.collapse(true);
        sel.removeAllRanges();
        sel.addRange(rng);
    }
}
else if (typeof document.selection !== 'undefined' && document.selection.type !== 'Control')
{
    document.selection.createRange().pasteHTML(node.outerHTML);
}
}

然而，尽管这在 IE、Opera 和 Firefox 中工作得很好，但在 Chrome 和 Safari 中却不起作用。在 Chrome/Safari 中，光标放置在跨度内文本的末尾，而不是跨度之后。 IE

<span>text CURSOR HERE</span>

而不是我想要的，即：

<span>text</span>CURSOR HERE

Thanks.

这是一个WebKit 中长期存在且令人烦恼的错误 https://bugs.webkit.org/show_bug.cgi?id=23189。也可以看看将插入符号放置在空内联元素内的特殊情况的错误 https://bugs.webkit.org/show_bug.cgi?id=15256，其中有更多的活动。您对此无能为力，除非插入和选择单个零宽度空格字符是可以接受的。