javascript - Contenteditable 文本编辑器和光标位置

Question

我如何(使用 jquery 或其他)在我的 contenteditable div 的光标/插入符号位置插入 html:

<div contenteditable="true">Hello world</div>

例如，如果光标/插入符号位于“hello”和“world”之间，然后用户单击了一个按钮，例如“插入图像”，然后使用 javascript，如 <img src=etc etc>将插入“hello”和“world”之间。我希望我已经说清楚了 =S

非常感谢示例代码，非常感谢!

Answer 1

以下函数会在所有主流桌面浏览器的光标位置插入一个DOM节点(元素或文本节点):

function insertNodeAtCursor(node) {
    var sel, range, html;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            sel.getRangeAt(0).insertNode(node);
        }
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        html = (node.nodeType == 3) ? node.data : node.outerHTML;
        range.pasteHTML(html);
    }
}

如果您想插入 HTML 字符串:

function insertHtmlAtCursor(html) {
    var sel, range, node;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = window.getSelection().getRangeAt(0);
            node = range.createContextualFragment(html);
            range.insertNode(node);
        }
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(html);
    }
}

我从我对类似问题的回答中改编了这个:How to find cursor position in a contenteditable DIV?