我有一个带有 contenteditable 集的 div 并且我正在使用 jquery 捕获按键以在按下 Enter 键时调用 preventDefault() 。与在光标处插入文本的这个问题类似 ，我想直接插入 html，为简洁起见，我们将其称为 br 标签。使用上述问题的答案实际上适用于 IE，因为它使用 range.pasteHTML 方法，但在其他浏览器中，br 标签将显示为纯文本而不是 html。如何修改答案以插入 html 而不是文本？
在 contenteditable div 中的插入符号处插入 html
IT技术
javascript
jquery
contenteditable
2021-02-01 00:53:45
4个回答
在大多数浏览器中，您可以使用insertNode() 从选择中获取的 Range 方法。在 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";
};
通过快速阅读并希望不会偏离主题，这里有一个轨道，适合像我一样需要在 div 的光标级别插入代码的人：
document.getElementById('editeur').contentWindow.document.execCommand('insertHTML', false, '<br />');
'editeur' 是 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";
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()