我有一个具有contenteditable设置的div，并且在按下Enter键时使用jquery捕获了按键，以调用preventDefault（）。与这个在光标处插入文本的问题类似，我想直接插入html，为简便起见，我们将其称为br标签。使用上述问题的答案实际上在IE中有效，因为它使用range.pasteHTML方法，但是在其他浏览器中，br标签将显示为纯文本而不是html。如何修改答案以插入html而不是文本？

#1 楼

在大多数浏览器中，可以使用从选择中获得的范围的insertNode()方法。如前所述，在IE <9中，您可以使用pasteHTML()。下面是在所有主要浏览器中执行此操作的功能。如果已经选择了内容，则将其替换，因此这实际上是粘贴操作。另外，我添加了代码，将插入符号放置在插入内容的结尾之后。 br /> 
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);
    }
}


UPDATE 2013年8月21日

根据注释的要求，这是一个带有附加参数的更新示例，该参数指定是否选择插入的内容。

演示：http://jsfiddle.net/timdown/jwvha/527/

代码：

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


评论

@ think123：您可以使用类似以下的功能来检查所选内容是否包含在特定节点中：stackoverflow.com/a/8340432/96100

– Tim Down
2012年9月7日下午14:29
@tundoopani：这是因为jsFiddle正在将pasteHtmlAtCaret（）函数放在onload处理程序中，其他任何人都看不到它。有关修复程序，请参见jsfiddle.net/jwvha/211。

– Tim Down
2012年9月19日在8:51
@Matt：使用document.execCommand（）通常可以在浏览器的撤消堆栈中使用，因此您可以使用document.execCommand（“ InsertHTML”，false，“ 一些粗体”）。但是，我还没有测试过撤消仍然可以使用该功能，并且IE不支持该命令。最后，在工作中存在一个UndoManager规范，它将长期解决此问题，并且开始在浏览器中实现：dvcs.w3.org/hg/undomanager/raw-file/tip/undomanager.html

– Tim Down
2014年1月15日12:29
@ Ced，iframe的窗口对象。原谅我引用此网站，但这是我在搜索您10秒钟内找到的最简单的示例...

– gdoron支持Monica
2015年9月6日上午10:58
6年后，这仍然是完美的解决方案。谢谢。

–FullStackFool
17年11月1日在9:20

#2 楼

var doc = document.getElementById("your_iframe").contentWindow.document;

// IE <= 10
if (document.selection){
    var range = doc.selection.createRange();
        range.pasteHTML("<b>Some bold text</b>");

// IE 11 && Firefox, Opera .....
}else if(document.getSelection){
    var range = doc.getSelection().getRangeAt(0);
    var nnode = doc.createElement("b");
    range.surroundContents(nnode);
    nnode.innerHTML = "Some bold text";
};


#3 楼

通过快速阅读并希望不要成为主题，这是针对那些像我一样需要在div的光标级别插入代码的人的书： >'editeur'是iframe：

document.getElementById('editeur').contentWindow.document.execCommand('insertHTML', false, '<br />');


contenu_editeur_wysiwyg.php：

<iframe id="editeur" src="contenu_editeur_wysiwyg.php">
</iframe>


不要忘记： 

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div>
</div>
</body>
</html>


#4 楼

var r = getSelection().getRangeAt(0);
r.insertNode(r.createContextualFragment('<b>Hello</b>'));

//select this range
getSelection().removeAllRanges();
getSelection().addRange(r);
//collapse to end/start 
getSelection().collapseToEnd()


评论

例如，这不适用于在输入中间添加的内容，插入后的选择将始终移至末尾。

–马里奥·埃斯特拉达（Mario Estrada）
8月27日0:20