Vue中使用Froala Editor时，外部方法调用html.insert()插入内容到光标最后停留位置功能实现

这里使用的 Vue JS Froala WYSIWYG Editor，本文主要介绍如果在编辑框失去焦点时，把内容插入到失去焦点前光标停留位置，Froala Editor 的基本使用请直接进入官方网站中查看。

解决问题步骤
- 通过监听事件记录光标最后停留位置
- 插入内容前，先设置文本框光标至最后停留位置

下面使用代码进行介绍

vue使用Froala Editor 部分代码如下：

<froala :tag="'textarea'" v-model="content" :config="config"></froala>

下面代码表示需要创建的一些froalaEditor的监听事件：

//events 对应config中的events,config的其他配置信息这里就不列出。
  events: {
    //this.editor 定义在vue data 中
    'froalaEditor.initialized': (e, editor) => {
      this.editor = editor;
    },
    //添加事件，在每次按键按下时，都记录一下最后停留位置
    'froalaEditor.keyup': (e, editor) => {
      this.lastEditRange = getSelection().getRangeAt(0);
    },
    //添加事件，在每次鼠标点击时，都记录一下最后停留位置
    'froalaEditor.click': (e, editor) => {
      this.lastEditRange = getSelection().getRangeAt(0);
    }
  }

把内容插入到光标最后停留位置

insertHtml(emoji){
  //设置编辑器获取焦点
  this.editor.events.focus();
  // 获取选定对象
  const selection = getSelection();
  // 判断是否有最后光标对象存在
  if (this.lastEditRange) {
    // 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态
    selection.removeAllRanges()
    selection.addRange(this.lastEditRange)
  }
  //插入内容
  this.editor.html.insert(emoji);
  //记录最后光标停留位置
  this.lastEditRange = selection.getRangeAt(0)
}