javascript - 在内容可编辑的 div 中的光标处插入文本

Question

我有一个 contenteditable div，我需要在插入符号位置插入文本，

这可以在 IE 中通过 document.selection.createRange().text = "banana" 轻松完成

在 Firefox/Chrome 中是否有类似的实现方式？

(我知道有一个解决方案 here ，但它不能用于 contenteditable div，而且看起来很笨拙)

谢谢!

Answer 1

以下函数将在插入符号位置插入文本并删除现有选择。它适用于所有主流桌面浏览器:

function insertTextAtCaret(text) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();
            range.insertNode( document.createTextNode(text) );
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().text = text;
    }
}

更新

根据评论，这里有一些用于保存和恢复选择的代码。在显示上下文菜单之前，您应该将 saveSelection 的返回值存储在一个变量中，然后将该变量传递给 restoreSelection 以在隐藏上下文菜单之后和插入之前恢复选择文本。

function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}