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

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

在大多数浏览器中，您可以使用从选择中获得的范围的

insertNode（）

方法。如您所述，在IE<9中，您可以使用

pasteHTML（）

。下面是在所有主要浏览器中执行此操作的函数。如果已选择内容，则将替换该内容，因此这实际上是一个粘贴操作。此外，我还添加了代码，将插入符号放在插入内容的末尾

jsFiddle：

代码：

函数粘贴HtmlatCaret（html）{
var-sel，范围；
if（window.getSelection）{
//IE9和非IE
sel=window.getSelection（）；
if（sel.getRangeAt&&sel.rangeCount）{
范围=选择范围（0）；
range.deleteContents（）；
//Range.CreateContexturalFragment（）在这里会很有用，但是
//仅在相对较新的标准化阶段，在中不受支持
//一些浏览器（比如IE9）
var el=document.createElement（“div”）；
el.innerHTML=html；
var frag=document.createDocumentFragment（），节点，lastNode；
while（（node=el.firstChild））{
lastNode=frag.appendChild（节点）；
}
range.insertNode（frag）；
//保留所选内容
如果（最后一个节点）{
range=range.cloneRange（）；
range.setStartAfter（lastNode）；
范围。塌陷（真）；
选择removeAllRanges（）；
选择添加范围（范围）；
}
}
}else if（document.selection&&document.selection.type！=“控制”）{
//IE<9
document.selection.createRange（）.pasteHTML（html）；
}
}

2013年8月21日更新

根据注释中的要求，下面是一个更新的示例，其中包含一个额外的参数，用于指定是否选择插入的内容

演示：

代码：

函数粘贴HtmlatCaret（html，选择粘贴内容）{
var-sel，范围；
if（window.getSelection）{
//IE9和非IE
sel=window.getSelection（）；
if（sel.getRangeAt&&sel.rangeCount）{
范围=选择范围（0）；
range.deleteContents（）；
//Range.CreateContexturalFragment（）在这里会很有用，但是
//仅在相对较新的标准化阶段，在中不受支持
//一些浏览器（比如IE9）
var el=document.createElement（“div”）；
el.innerHTML=html；
var frag=document.createDocumentFragment（），节点，lastNode；
while（（node=el.firstChild））{
lastNode=frag.appendChild（节点）；
}
var firstNode=frag.firstChild；
range.insertNode（frag）；
//保留所选内容
如果（最后一个节点）{
range=range.cloneRange（）；
range.setStartAfter（lastNode）；
如果（选择粘贴内容）{
range.setStartBefore（第一个节点）；
}否则{
范围。塌陷（真）；
}
选择removeAllRanges（）；
选择添加范围（范围）；
}
}
}else if（（sel=document.selection）&&sel.type！=“Control”）{
//IE<9
var originalRange=sel.createRange（）；
原始范围。折叠（真）；
sel.createRange（）.pasteHTML（html）；
如果（选择粘贴内容）{
range=sel.createRange（）；
range.setEndPoint（“StartToStart”，原始范围）；
range.select（）；
}
}
}

var doc=document.getElementById（“您的iframe”）.contentWindow.document；
//IE
var r=getSelection（）.getRangeAt（0）；
r、 insertNode（r.createContextualFragment（'Hello'））；
//选择此范围
getSelection（）.removeAllRanges（）；
getSelection（）.addRange（r）；
//折叠到结束/开始
getSelection（）.collapseToEnd（）
通过快速阅读并希望不要偏离主题，以下是一条适合像我这样需要在div的光标级别插入代码的人的轨迹：

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

@think123：您可以使用如下函数来检查选择是否包含在特定节点中：@tundoopani:这是因为JSFIDLE将
pasteHtmlAtCaret（）
函数放置在
onload
处理程序中，其他处理程序看不到它。有关修复方法，请参阅。@Matt:Using
document.execCommand（）
通常与浏览器的撤消堆栈一起使用，因此您可以使用
document.execCommand（“InsertHTML”，false，“一些粗体文本”）
。然而，我还没有测试过撤销仍然可以使用它，IE也不支持这个命令。最后，有一个UndoManager规范正在开发中，它将是解决这一问题的长期解决方案，并开始在浏览器中实现：@Ced，iframe的窗口对象。请原谅我引用，但这是我在搜索你的10秒内找到的最简单的例子…@Alex:你的选项是1）使用
mousedown
事件，并阻止按钮的默认单击操作；2）使工具栏按钮不可选择，或3）在单击工具栏按钮之前保存选择（可能通过<代码>鼠标下沉< /代码>事件）并在之后恢复（但在插入之前），这对于输入的中间添加的内容是不起作用的，例如，插入后的选择总是移动到结尾。
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();
        }
    }
}

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";
};

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

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

<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>

document.getElementById('editeur').contentDocument.designMode = "on";