插入到contenteditable时元素后面的光标位置?

时间:2014-11-18 20:59:34

标签: contenteditable

我希望能够将包含在跨度中的图像插入到可信的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();
        }
    }
}

1 个答案:

答案 0 :(得分:3)

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