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

在此，我们采用可编辑div作为编辑框，首先给编辑框获取focus加光标，然后，点击取消编辑框失去焦点，但是依然保存光标位置（假装失去焦点），然后，点击确定，为光标位置添加内容。

<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>