vue使用contenteditable 实现光标处插入自定义图片

前几天接到一个需求，要自定义编辑短信模板但是里面有姓名，日期这样的标签，为了用起来方便于是决定让用户自己选中插入，类似富文本插入图片那样，好了废话不多说，展示。

<template><div class="content-padding"><div class="shortMessage-tag"><!-- 插入图片的标签 --><img @click="handleTag" :src="require('../../../static/images/name.png')"></div><div@click="handleSelection"@input="handleSelection"class="shortMessage-div_input"contenteditable="true"><div>请输入</div></div></div>
</template><script>
import '../../assets/styles/vip/module/welfare.scss'
export default {data() {return {selection: null,range: null,textNode: null,rangeStartOffset: null}},methods: {// 点击要插入的图片handleTag(e) {const parseDom = this.parseDom(`<img @click="handleTag" src="${require('../../../static/images/name.png')}">`)// 在光标处插入domthis.range.insertNode(parseDom)// 光标开始和光标结束重叠this.range.collapse(true)},// 记录光标位置等 （debounce防抖提升性能）handleSelection() {this.selection = getSelection()// 光标对象this.range = this.selection.getRangeAt(0)// 获取光标对象的范围界定对象this.textNode = this.range.startContainer// 获取光标位置this.rangeStartOffset = this.range.startOffset;},// 转dom对象parseDom(arg) {var objE = document.createElement("div");objE.innerHTML = arg;return objE.childNodes[0];}}
}
</script>

vue使用contenteditable 实现光标处插入自定义图片相关推荐

contentEditable,window.getSelection详解---可编辑div，容器，设置/获取光标位置，光标处插入内容及光标的操作
这周碰到一个东西,contentEditable ,它是用来指定一个元素是否是可编辑的,这也是富文本编辑器实现的底层支持,网上关于这部分东西的资料比较少或者不全,所以我来整理下关于这个属性,和可编辑区 ...
java文本框光标后添加图片_由编辑器从光标处插入图片(失去焦点后仍然可以在原位置插入)实现的富文本编辑器...
大家都知道,如果只是大概的实现一个简单的富文本编辑器,直接用execCommand就可以了,虽然不同浏览器对execCommand命令的反应不一样,最后效果是差不多的.当然,如果要严谨的,用像uedi ...
js在PageOffice打开的Word文档光标处插入书签
在使用Word时,如果内容过多有时为了快速定位到内容的某一处或某一部分怎会在该处添加书签.Word中的书签可以通过工具栏手动添加或删除,也可以通过后台程序结合JS函数在当前光标处插入书签,或根据书签名 ...
使用JS在textarea在光标处插入内容
为什么80%的码农都做不了架构师?>>> // 在光标处插入字符串// myField 文本框对象// myValue 要插入的值function insertAtCursor ...
html文本框光标位置,html的文本框显示光标如何在htmlText文本框光标处插入字符...
HTML 如何设置文本框中光标位置和光标居中我写样式,把文本框的宽度加大了.但是光标位置在上面. html怎么让文本框的光标出现在内容最后 HTML如何在打开页面时将光标定位在某个文本框 HTML5 ...
解决从光标处插入图片光标消失的问题
最近在做一个富文本编辑器,当鼠标单击事件发生在编辑区域外以后,光标就会消失,那么execCommand()方法就不能在编辑器处执行. 此时需要记录下光标消失的位置,一下几篇博文帮助非常大,记录下,以便 ...
react/antd实现textarea获取光标位置在光标处插入文字
react/antd实现textarea获取光标位置在光标处插入文字 1.首先将textarea对象通过refs存起来 <TextArearef={(input) => this.cont ...
在文本框的光标处插入指定的文本（兼容IE6和Firefox）
昨天有人问我这个事,今天就来做做了,最开始是按自己的思路做,在keyup事件里对输入键做判断,以处理什么退格啊,删除啊,上下左右移动等动作,然后记录光标位置来做文本处理,费了好大劲.不过后来无意中发现 ...
html input或textarea 如何在光标处插入内容
在大部分应用程序中,Tab是用来切换焦点的,浏览器也不例外.可是如果想在input或textarea输入Tab就很困难.这里就教大家用jQuery写一个允许输入Tab(四个空格)的方法. $(func ...
C# 在 webBrowser 光标处插入 html代码 .
private void BtnInsertMedia_Click(object sender, EventArgs e) { InWord frm = new InWord(&quo ...

vue使用contenteditable 实现光标处插入自定义图片

vue使用contenteditable 实现光标处插入自定义图片

vue使用contenteditable 实现光标处插入自定义图片相关推荐

最新文章

热门文章