Javascript 如何单击内容可编辑div，然后单击范围保留焦点

这是小提琴链接的代码

在这种情况下，我单击的范围会附加到div中的内容，但我希望它不会附加到光标的特定位置

document.querySelector（“.可选图标”）.addEventListener（'click'，函数（e）{
document.querySelector（“[contenteditable]”）、appendChild（e.target.cloneNode（true））；
});
document.querySelector（'div'）。addEventListener（'keydown'，函数（事件）{
//检查是否有退格
if（event.which==8）{
s=window.getSelection（）；
r=s.getRangeAt（0）
el=r.startContainer.parentElement
//检查当前元素是否为.label
if（el.classList.contains（'label'））{
//检查我们是否正好位于.label元素的末尾
if（r.startOffset==r.endOffset&&r.endOffset==el.textContent.length）{
//防止默认的删除行为
event.preventDefault（）；
if（el.classList.contains（'highlight'））{
//移除该元素
el.移除（）；
}否则{
el.classList.add（'highlight'）；
}
返回；
}
}
}
event.target.queryselectoral（'span.label.highlight'）.forEach（函数（el）{el.classList.remove（'highlight'）；}）
});
[内容可编辑]{
边框：1px实心#000；
保证金：0.4em0；
线高：1.4em；
-webkit外观：textfield；
外观：textfield；
}
img{
垂直对齐：顶部；
最大高度：1.4em；
最大宽度：1.4em；
}
.可选图标img{
光标：指针；
}
span.label.highlight{
背景：#E1ECF4；
边框：1px点#39739d；
}
只需单击图标即可添加它

Ingredient1
成分2
成分3
你可以在这里打字。添加一个图标。
要在光标位置插入元素，需要在焦点丢失之前保存当前位置。然后单击，您需要在添加元素之前恢复该位置。
我已经更新了你的JSFIDLE

你可以在这里看一看

我希望这会有所帮助。
为了能够在光标位置插入元素，您需要在焦点丢失之前保存当前位置。然后单击，您需要在添加元素之前恢复该位置。
我已经更新了你的JSFIDLE

你可以在这里看一看

我希望这能有所帮助。
类似的东西应该适合你。点击活动正在进行中。是的，我知道。您想在当前光标位置添加单击的项吗？是的，我需要添加单击项OK。像这样的东西应该对你有用吧。点击活动正在进行中。是的，我知道。您想在当前光标位置添加单击的项吗？是的，我需要添加单击项OK。怎么样
function saveSelection() {
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            return sel.getRangeAt(0);
        }
    } else if (document.selection && document.selection.createRange) {
        return document.selection.createRange();
    }
    return null;
}

function restoreSelection(range) {
    if (range) {
        if (window.getSelection) {
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.selection && range.select) {
            range.select();
        }
    }
}

function pasteHtmlAtCaret(html) {
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.insertNode(html);
            restoreSelection(range);
        }
    } else if (document.selection && document.selection.type != "Control") {
        document.selection.createRange().pasteHTML(html);
    }

}