在内容可编辑的div中插入html

Question

在内容可编辑的div中插入html

我有一个div，它有一个内容可编辑的集合，当按下Enter键时，我使用jQuery来捕获keypress，以调用预防性Default()。类似于这个问题它在光标处插入文本，我想直接插入html，为了简洁起见，我们会说它是br标记。使用上述问题的答案实际上在IE中有效，因为它使用range.pasteHTML方法，但在其他浏览器中，br标记将显示为纯文本而不是html。如何修改答案以插入html而不是文本？

Answer 1

var&nbsp;doc&nbsp;=&nbsp;document.getElementById("your_iframe").contentWindow.document;//&nbsp;IE&nbsp;<=&nbsp;10if&nbsp;(document.selection){ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;range&nbsp;=&nbsp;doc.selection.createRange(); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;range.pasteHTML("<b>Some&nbsp;bold&nbsp;text</b>");//&nbsp;IE&nbsp;11&nbsp;&&&nbsp;Firefox,&nbsp;Opera&nbsp;.....}else&nbsp;if(document.getSelection){ &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;range&nbsp;=&nbsp;doc.getSelection().getRangeAt(0); &nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;nnode&nbsp;=&nbsp;doc.createElement("b"); &nbsp;&nbsp;&nbsp;&nbsp;range.surroundContents(nnode); &nbsp;&nbsp;&nbsp;&nbsp;nnode.innerHTML&nbsp;=&nbsp;"Some&nbsp;bold&nbsp;text";};

Answer 2

var&nbsp;r&nbsp;=&nbsp;getSelection().getRangeAt(0);r.insertNode(r.createContextualFragment('<b>Hello</b>'));//select&nbsp;this&nbsp;rangegetSelection().removeAllRanges();getSelection().addRange(r);//collapse&nbsp;to&nbsp;end/start&nbsp;getSelection().collapseToEnd()