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

【问题标题】：Position cursor after element when inserting into contenteditable?插入contenteditable时将光标定位在元素之后？
【发布时间】：2015-01-16 04:58:18
【问题描述】：

我希望能够将包含在 span 中的图像插入到内容可编辑的 div 中。我可以做到这一点没问题，但是当我输入图像之后，它会将我的文本插入图像范围。如何将光标定位在我刚刚插入的跨度之后？

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

这是我的图片插入功能：

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

【问题讨论】：

标签： contenteditable

【解决方案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);
        }
    }
}

【讨论】：