关于可编辑div contentEditable=true 添加表情光标设置问题

web版的聊天室对与前端来说真的是一个头疼的问题，特别是输入框显示表情，需要contentEditable属性来显示，但是contentEditable又有光标问题，插入的表情无法在光标下插入，会自动跳到最前面，还有就是输入框打开时，光标总是跳到最前面，下面是两个方法解决表情输入到光标下和自动跳到文本最后面

1、在光标后输入 //下面是vue-cli中的代码

function selectImg (item) {
let Img = `<img class="text-emoji" name="${item.name}" src="${item.file}" />` // img是要插入的图片表情
let obj = this.$refs.emoji // obj 是可编辑的div
let range, node
if (!obj.hasfocus) {
obj.focus()
}
if (window.getSelection && window.getSelection().getRangeAt) {
range = window.getSelection().getRangeAt(0)
range.collapse(false)
node = range.createContextualFragment(Img)
let c = node.lastChild
range.insertNode(node)
if (c) {
range.setEndAfter(c)
range.setStartAfter(c)
}
let j = window.getSelection()
j.removeAllRanges()
j.addRange(range)
} else if (document.selection && document.selection.createRange) {
document.selection.createRange().pasteHTML(Img)
}
}

2、把光标设置在文本最后

keepLastIndex (obj) { // obj 为可编辑的div 移动端的就没做低版本的兼容
if (window.getSelection) {
let range = window.getSelection()// 创建range
range.selectAllChildren(obj)// range 选择obj下所有子内容
range.collapseToEnd()// 光标移至最后
}
}

关于可编辑div contentEditable=true 添加表情光标设置问题相关推荐

富文本编辑器，可编辑div contentEditable=true，光标位置window.getSelection
在近期项目中,需要在一个实时通信软件中,在发送消息时支持发送加粗的消息,现在总结一下使用心得. 需求: 在发送消息时,点击加粗图标,图标添加选中效果,输入的文字.添加的文字表情.@人员都需要显示为加粗 ...
开启html元素的编辑模式contenteditable=true
开启html元素的编辑模式contenteditable="true" 转载于:https://www.cnblogs.com/yangchongxing/p/7642407.ht ...
vue可编辑div_vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable="true" 的 div , ...
关于可编辑div插入表情图标
在最近的开发中因为项目需要一个可编辑插入表情的编辑框,起初也是头大煎熬,总是被我熬出来了. 在可编辑框中为难我们的是光标定位和在光标的位置插入指定的内容和表情下面开始正事节点内容是这样的我用的是v ...
div可编辑，contenteditable 属性
1.添加contenteditable属性让文本处于可编辑状态, 实例 <div contenteditable="true">这里可以编辑</div> c ...
撸VUE弹窗组件 + 可编辑div 组件
现在我们先只看看已经实现的功能,下次再发布如何从写组件到发布npm,和其中遇到的一些坑都是实现一些简单的功能,代码量很小,其中还结合网上的一些比较优秀的代码,如果发现自己的一小部分代码也在里面,不要 ...
android仿微信图片编辑器,electron/vue可编辑框contenteditable|仿微信截图
基于Electron+vue实现div可编辑contenteditable插入表情|electron-vue截图功能为了避免使用 vue 手动建立起 electron 应用程序.electron-v ...
在可编辑div中插入文字或图片的问题解决思路
最近在网上碰到一个人问了我一个问题,在可编辑div中插入文字或者图片.因为web在线编辑器我从来只是用,基本不会去研究源代码.后来正好一个在线聊天web项目中也要用到这个功能,我就特地看看了代码. 基 ...
使用contenteditable=“true“改造div可编辑文本框
使用contenteditable="true"改造div可编辑文本框,并去除粘贴复制的格式问题 contenteditable="true" 可编辑 cont ...

关于可编辑div contentEditable=true 添加表情光标设置问题

关于可编辑div contentEditable=true 添加表情光标设置问题相关推荐

最新文章

热门文章