在编辑器里插入文字、图片表情等需要用到Js定位光标节点。
常见思路是把光标两边数据切开,把图片或者字符加在中间,然后把三个字符串重新拼接起来,这样要算长度、切割字符串、重新拼接起来。很麻烦。
我的Vue项目中:
/*
* 选择表情 插入聊天框
* */
select(e) {
// 定义最后光标对象
let lastEditRange;
//获取点击图片地址
let $myInput = this.$el.querySelector('.my-input')
// 编辑框设置焦点
$myInput.focus()
// 获取选定对象
let selection = getSelection()
// 判断是否有最后光标对象存在
if (lastEditRange) {
// 存在最后光标对象,选定对象清除所有光标并添加最后光标还原之前的状态
selection.removeAllRanges()
selection.addRange(lastEditRange)
}
//定义图片节点--》插入到光标所在位置-----》完成!下面4行是关键。直接在光标位置处插入节点。
let range = selection.getRangeAt(0)
range.insertNode(e)
},
但是点击表情插入成功后,会有个选中的效果,不知怎么去除,可不可以只获得焦点而不选中?(如果有什么方法,欢迎留言评论啊,我要向你们学习)
转载地址:https://blog.csdn.net/houxingyao/article/details/62887480#commentBox