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

Question

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

Here是我的 fiddle (单击“在光标处添加图像”并将文本输入到可编辑的内容中。观察文本在图像父级跨度内。)

这是我的图像插入功能:

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

Added a text node after the span and moved the range to that

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);
        }
    }
}