快速插入文本並恢復光標的方法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);

注意 這種方法僅適用於插入文本的前後，文本本身沒有修改~