原文：https://blog.csdn.net/smartsmile2012/article/details/53642082
createDocumentFragment()用法： https://blog.csdn.net/qiao13633426513/article/details/80243058
html
<iframe id="editor" width="600px" height="400px" style="border:solid 1px;"></iframe> <input type="txt" onclick="alert(getPosition(event.target))"/>
js
//初始化编辑器 function init() { var ifr = document.getElementById("editor"); var doc = ifr.contentDocument || ifr.contentWindow.document; // W3C || IE doc.open(); doc.designMode="on"; doc.contentEditable = true; doc.write('<html><head><style>body{margin:3px; word-wrap:break-word; word-break: break-all; }</style></head><body>GoodNessEditor</body></html>'); doc.close(); doc.addEventListener('paste',function(e){ e.preventDefault(); posInsertTxt(e,'插入的内容!'); }); } init(); //在光标位置插入内容 var posInsertTxt = (event, txt) => { var element = event.target ? event.target : event; var doc = element.ownerDocument || element.document; var win = doc.defaultView || doc.parentWindow; var sel; if (typeof win.getSelection != "undefined") {//谷歌、火狐 sel = win.getSelection(); if (sel.rangeCount > 0) {//选中的区域 var range = win.getSelection().getRangeAt(0); range.deleteContents(); var el = document.createElement("div"); el.innerHTML = txt; //createDocumentFragment 创建虚拟的节点对象，在创建之初是空的，在把一个DocumentFragment节点插入文档树时，插入的不是DocumentFragment自身，而是它的所有子孙节点 var frag = document.createDocumentFragment(), lastNode; if (el.firstChild) { //这里在虚拟节点位置加入的是 文本节点,不是元素节点 lastNode = frag.appendChild(el.firstChild); } //在范围初插入节点 range.insertNode(frag); if (lastNode) { range = range.cloneRange(); range.setStartAfter(lastNode); range.collapse(true); sel.removeAllRanges(); sel.addRange(range); } } } else if ((sel = doc.selection) && sel.type != "Control") {//IE < 9 var textRange = sel.createRange(); textRange.pasteHTML(txt); } }