关于可编辑div插入表情图标

在最近的开发中因为项目需要一个可编辑插入表情的编辑框，起初也是头大煎熬，总是被我熬出来了。
在可编辑框中为难我们的是光标定位和在光标的位置插入指定的内容和表情
下面开始正事
节点内容是这样的我用的是vue作为前端

<div :contenteditable="true"></div>

要在指定的位置插入内容我们需要获得光标的位置

let selection = getSelection();
let range=selection.getRangeAt(0);
that._lastRange =range;

当我们在可编辑框中失去焦点的时候我们记录下最后光标所在位置。

我们插入表情图片，代码：

   var imgthat = $(event.currentTarget);     var img = imgthat[0].cloneNode(true);       // 获取选定对象let selection = getSelection();// 判断是否有最后光标对象存在if (that._lastRange) {// 存在最后光标对象，选定对象清除所有光标并添加最后光标还原之前的状态selection.removeAllRanges()selection.addRange(that._lastRange)}//定义图片节点--》插入到光标所在位置-----》完成！下面4行是关键。直接在光标位置处插入节点。let range=selection.getRangeAt(0);range.insertNode(img)range.collapse(false);that._lastRange = range; //记录插入图片后当前光标位置 (否则光标会跑到表情前面)

最后实现的效果如图

以上就是我这次实现的代码，希望对遇到的人有所帮助

关于可编辑div插入表情图标相关推荐

【selection】学习光标API并实现编辑区插入表情图片的功能
目录场景介绍 selection介绍 selection API range 介绍 range API 实现编辑区插入表情图片参考资料场景介绍在写web版聊天器时,遇到一个需求: 聊天时用户可 ...
【英语思维导图制作】万彩脑图大师教程 | 插入表情
在绘制思维导图时,恰当的插入表情图标,能够对导图的内容进行补充强调,使得导图整体图文结合,更加美观,本文主要讲解如何使用万彩脑图大师添加表情. 选中相应主题,从鼠标右键菜单中选择"添加表情& ...
在可编辑div中插入文字或图片的问题解决思路
最近在网上碰到一个人问了我一个问题,在可编辑div中插入文字或者图片.因为web在线编辑器我从来只是用,基本不会去研究源代码.后来正好一个在线聊天web项目中也要用到这个功能,我就特地看看了代码. 基 ...
vue 怎么在字符串中指定位置插入字符_vue项目中在可编辑div光标位置插入内容的实现代码...
vue项目中在可编辑div光标位置插入内容 html: @dragstart="dragStart($event, item.labelName)" draggable='true ...
vue光标插入内容_vue项目中在可编辑div光标位置插入内容的实现代码
vue项目中在可编辑div光标位置插入内容 html: @dragstart="dragstart($event, item.labelname)" draggable='true ...
可编辑div在光标位置插入指定内容
可编辑div在光标位置插入指定内容 //在光标位置插入内容 insertContent(content) {if (!content) {//如果插入的内容为空则返回return;}let sel = ...
在评论输入框中插入表情
最近在做一个后台管理系统,要求可以对前台用户的作品进行评论,而评论要可以输入表情,常规的文字输入框都是用的文本域 textarea 来做的,但这种输入框只能输入文字,没有办法输入表情图标,这个时候可编 ...
如何在富文本中插入表情，word文档，及数学公式？
前言互联网寒冬一直在持续,不知道大家过的还好吗?不过话说回来,技术过硬,你在哪里都是最靓的仔.今天就给大家补充一点弹药,如何在富文本中插入表情,word文档,及数学公式. 为什么是 TinyMCE ...
输入框显示表情图标-vue篇
1.子组件封装 <template><div><div class="box text edit" :contenteditable="is ...

关于可编辑div插入表情图标

关于可编辑div插入表情图标相关推荐

最新文章

热门文章