js 在光标位置插入内容

原文：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 > ) {//选中的区域
                var range = win.getSelection().getRangeAt();
                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);
        }
    }