富文本实现插值

最近项目上需要一个富文本框实现插值操作，插值不可编辑，但是可以删除，尝试了好几种方案，最终决定用contenteditable这个属性来实现

首先， contenteditable="true"可以使元素成为可编辑状态

<div contenteditable="true"></div>

在设置了contenteditable属性的元素中，可以插入或编辑任意的元素，如果要实现不可编辑的插值的话，可以将插值的元素设置为contenteditable="false"，这样，就实现了富文本插值。

但是，还有问题，如何将元素插入指定的光标位置

浏览器提供了selection和range对象来操作光标

 // 将内容插入到光标位置，并将光标移动到内容元素末尾
function insertAtCursor(domNode) {
    
    // 获取被选中的内容，起点和终点在同一位置为光标，不同位置为选区
    const selection = window.getSelection();
    // 被选中/focus的元素
    const anchorNode = selection.anchorNode;
    if (!anchorNode) return;
    // 父节点
    const range = selection.getRangeAt(0);
	// 插入传入的元素节点
    range.insertNode(domNode);
    // collapse为true使起点和终点位于同一位置，即光标
    // false时则为选区内容
    range.collapse(true);

    // 光标移到最后
    const r = document.createRange();
    r.selectNodeContents(domNode);
    r.collapse(false);
    const s = window.getSelection();
    s.removeAllRanges();
    s.addRange(r);
}

这样，就可以把元素插入光标位置，并把光标移动到元素末尾