可编辑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字符串。