【解决】:可编辑div插入内容后光标位置不对的问题🌻

插入内容,并将指定可编辑div框的焦点设置在其末尾

onInputDivLastFocus(res) {//res-需要插入的内容
    let el = document.createElement("span"); //创建一个空的div外壳
    el.innerHTML = res; //设置div内容为我们想要插入的内容。
    let frag = document.createDocumentFragment(); //创建一个空白的文档片段，便于之后插入dom树

    let node = el.firstChild;//获取外壳的第一个节点,即我们想要插入的内容
    let lastNode = frag.appendChild(node);

    let selection = window.getSelection();//返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。---重点: 需提前在目标位置使用 .focus获取一次焦点,方便此处定位
    let range = selection.getRangeAt(0); //获取编辑框失去焦点时的光标位置

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