可编辑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);             //添加修改后的选区
    }
}

};

tips: 在Vue中使用，因为点击其他元素会导致DIV失去焦点，获取的sel对象是当前点击选中的元素，所以要给DIV绑定点击事件，把sel保存在data里面，再调用insertContent方法，把里面的sel和range改成data的就可以使用了