在 contenteditable div 中的插入符处插入 html

我有一个带有 contenteditable 设置的 div，并且我正在使用 jquery 捕获按键，以在按下 Enter 键时调用 PreventDefault() 。如同这个问题 https://stackoverflow.com/questions/2920150/insert-text-at-cursor-in-a-content-editable-div它在光标处插入文本，我想直接插入 html，为了简洁起见，我们会说它是 br 标签。使用上述问题的答案实际上可以在 IE 中工作，因为它使用 range.pasteHTML 方法，但在其他浏览器中 br 标记将显示为纯文本而不是 html。我如何修改答案以插入 html 而不是文本？

在大多数浏览器中，您可以使用insertNode()您从选择中获得的范围的方法。在 IE pasteHTML()，正如你提到的。下面是在所有主要浏览器中执行此操作的函数。如果已选择内容，则会将其替换，因此这实际上是粘贴操作。另外，我添加了代码以将插入符号放置在插入内容末尾之后。

js小提琴：http://jsfiddle.net/jwvha/1/ http://jsfiddle.net/jwvha/1/

Code:

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // only relatively recently standardized and is not supported in
            // some browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        // IE < 9
        document.selection.createRange().pasteHTML(html);
    }
}

2013 年 8 月 21 日更新

根据评论中的要求，这里是一个更新的示例，其中包含一个额外的参数，用于指定是否选择插入的内容。

Demo: http://jsfiddle.net/timdown/jwvha/527/ http://jsfiddle.net/timdown/jwvha/527/

Code:

function pasteHtmlAtCaret(html, selectPastedContent) {
    var sel, range;
    if (window.getSelection) {
        // IE9 and non-IE
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();

            // Range.createContextualFragment() would be useful here but is
            // only relatively recently standardized and is not supported in
            // some browsers (IE9, for one)
            var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            var firstNode = frag.firstChild;
            range.insertNode(frag);

            // Preserve the selection
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                if (selectPastedContent) {
                    range.setStartBefore(firstNode);
                } else {
                    range.collapse(true);
                }
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        // IE < 9
        var originalRange = sel.createRange();
        originalRange.collapse(true);
        sel.createRange().pasteHTML(html);
        if (selectPastedContent) {
            range = sel.createRange();
            range.setEndPoint("StartToStart", originalRange);
            range.select();
        }
    }
}