在可内容的 div 中插入插入符号的 html

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

82010 次浏览
小开
最佳答案

在大多数浏览器中，您可以使用从所选内容中获得的 Range 的 insertNode()方法。如前所述，在 IE < 9中可以使用 pasteHTML()。下面是在所有主要浏览器中执行此操作的函数。如果内容已经选中，则替换它，因此这实际上是一个粘贴操作。此外，我还添加了代码来在插入的内容结束后放置插入符号。

jsFiddle: http://jsfiddle.net/jwvha/1/

密码:

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日

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

演示: 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();
}
}
}
小开 
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()
小开

通过快速阅读并希望不要偏离主题，这里有一个专门针对那些像我一样需要在 div 的光标级别插入代码的人的专题:

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

“ Editor”是 iframe:

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

Contenu _ editeur _ wysiwyg.php:

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

提交答案