将插入HTML插入一个contenteditable div插入符号
我有一个div contenteditable集，我正在使用jquery捕获按键，当enter键被按下时调用preventDefault（）。 类似于在光标处插入文本的问题 ，我想直接插入html，为简洁起见，我们会说它是一个br标签。 使用上面的问题的答案实际上在IE中工作，因为它使用range.pasteHTML方法，但在其他浏览器中，br标签将显示为纯文本而不是html。 我怎样才能修改插入HTML和不是文本的答案？
在大多数浏览器中，可以使用从select中获得的范围的insertNode()方法。 在IE <9中，你可以使用pasteHTML() ，就像你提到的那样。 以下是在所有主stream浏览器中执行此操作的function。 如果内容已被选中，则被replace，所以这实际上是一个粘贴操作。 另外，我添加了插入内容结束后插入的代码。
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日
按照注释中的要求，这是一个带有额外参数的更新示例，该参数指定是否select插入的内容。
演示： 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()
