您的位置:首页 > 产品设计 > UI/UE

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

2017-06-18 00:58 1216 查看
这里使用的 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)
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐