可编辑div在光标位置插入指定内容

可编辑div在光标位置插入指定内容

//在光标位置插入内容
insertContent(content) {
    if (!content) {//如果插入的内容为空则返回
        return;
    }
    let sel = null;
    if (document.selection) {//IE9以下
        sel = document.selection;
        sel.createRange().pasteHTML(content);
    } else {
        sel = window.getSelection();
        if (sel.rangeCount > 0) {
            let range = sel.getRangeAt(0);      //获取选择范围
            range.deleteContents();             //删除选中的内容
            let el = document.createElement("div"); //创建一个空的div外壳 
            el.innerHTML = content;                 //设置div内容为我们想要插入的内容。
            let frag = document.createDocumentFragment();//创建一个空白的文档片段，便于之后插入dom树

            let node = el.firstChild;
            let lastNode = frag.appendChild(node);
            range.insertNode(frag);                 //设置选择范围的内容为插入的内容
            let contentRange = range.cloneRange();  //克隆选区
            contentRange.setStartAfter(lastNode);          //设置光标位置为插入内容的末尾
            contentRange.collapse(true);                   //移动光标位置到末尾
            sel.removeAllRanges();                  //移出所有选区
            sel.addRange(contentRange);             //添加修改后的选区
        }
    }
}

需注意：在谷歌浏览器下测试发现:

document.execCommand("inserHTML", "false", '<p><img src="./test.png" /></p>);

当使用这种方式插入html内容时，p标签不见了，只有img标签存在。但是如果单独插入一个p标签时，p标签又存在。故经多次测试发现inserHTML方式只适合插入单个标签，复合标签插入时则解析错乱。

使用方式

 let imgTag = `<p><img src=${eidtorImg.src} /></p>`;
 this.insertContent(imgTag);
 //content内容为html字符串。