快速插入文本并恢复光标的方法execCommand

场景描述

一个可编辑的div，在输入文本后，需要进行一些交互插入文本如右键插入，插入文本后需要恢复光标。

使用execCommand命令插入文本

一般情况下，我们会使用selection获取光标的位置后，插入文本或者html然后再恢复光标。但是如果使用execCommand则一行代码搞定。

    // 插入文本
    document.execCommand('insertHTML', false, value);

如果在执行交互的时候会修改range，那么需要提前克隆

   // 记录操作前的range
   this.focusRange = document.getSelection().getRangeAt(0).cloneRange();

    // 先恢复光标
    document.getSelection().removeAllRanges();
    document.getSelection().addRange(this.focusRange);
    // 再插入文本
    document.execCommand('insertHTML', false, value);

注意 这种方法仅适用于插入文本的前后，文本本身没有修改~