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)}