插入 contenteditable 时将光标定位在元素之后？

Question

我希望能够将包裹在跨度中的图像插入到可编辑的 div 中。我可以做到这一点没问题，但是当我开始打字时，在图像之后，它会将我的文本插入到图像跨度中。如何在刚刚插入的跨度之后定位光标？

这是我的小提琴（单击“在光标处添加图像”并将文本输入到可编辑的内容中。观察文本在图像父级跨度内。）

这是我的图像插入功能：

function insertElementAtCursor(elm) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode(elm);
            placeCaretAfterNode(elm);
            updateTextArea();
        }
    }
}

Answer 1

在跨度之后添加一个文本节点并将范围移动到那个

function insertElementAtCursor(elm) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode(elm);

            var textNode = document.createTextNode('\u00A0');
            range.setStartAfter(elm);
            range.insertNode(textNode);
            range.setStartAfter(textNode);
            range.collapse(true);
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
}