JS range之保存光标位置,为 光标位置添加内容

<button class="cancel">Cancel</button>
<button class="Sure">Sure</button>
<div contenteditable="true" id="textbox">
<strong>test</strong>
<p>testtesttesttest</p>
<strong>testtest</strong>
<img src="1.jpg" alt="test">
</div>

<script src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".cancel").on("click", function(){
var text = '';
insertTextAtSelection(text);
})
$(".Sure").on("click", function(){
var text = '<strong><i>加粗变斜体</i></strong>';
insertTextAtSelection(text,"html");
})
function insertTextAtSelection(text, mode) {
var _this = this;
var sel, range, node;
mode = mode || '';
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
// range.deleteContents();
var textNode = document.createTextNode(text);
if (mode == "html") {
var el = document.createElement("div");
el.innerHTML = text;
var frag = document.createDocumentFragment(),
node, lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
sel.removeAllRanges();
range = range.cloneRange();
sel.addRange(range);
} else {
console.log(textNode);
range.insertNode(textNode);
range.selectNode(textNode);
}
}
}
}
});
</script>