将光标插入到contenteditable时将光标放在元素之后吗？


Position cursor after element when inserting into contenteditable?

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

这是我的小提琴(单击"在光标处添加图像"，然后将文本输入到内容中可编辑。观察该文本在图像父跨度之内。)

这是我的图像插入功能：

1
2
3
4
5
6
7
8
9
10
11
12
13
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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);
        }
    }
}