要在textarea文本框中粘贴图片怎么办？

项目需求：

有一条描述信息（文字 + 图片），点击编辑，文本框中显示描述信息，并且可以对描述信息做出修改

拆解需求：

文本框里要能显示预设的值（文字 + 图片）
文本框里还要能支持粘贴文字与图片

实际做法

最开始我试图直接使用input元素或者el-input组件，但是在网上找了很多方法，也无法实现图片的显示，后来看到某个大大分享的文章里提到【一个元素比如div加上contenteditable = ‘true’,这个元素就跟textarea文本框一样是可编辑的了】，于是开始从这里着手去解决,将解决方法分享给大家，希望对大家有帮助，啾咪~

template中

<div @edit(desc)>{{desc.description}}<img v-for=(item,index) in  desc.figure : key="index" src="item">
</div>
<el-dialog title="提示":visible.sync="dialogVisible"><div class="img-textarea" @paste="descImgPaste($event)" contenteditable="true" ></div><el-button  @click="confirm">确定</el-button>
</el-dialog>

data中

dialogVisible: false,
desc: {description: '描述文字' ，figure:['http://pic2.sc.chinaz.com/files/pic/pic9/202004/bpic20079.jpg' ]
}

methods中点击编辑时要做的操作

eidt(data){ //data是描述信息，类似于{description: '描述文字' ，figure:[ 图片数组 ] }this.dialogVisible= truethis.$nextTick(() => {let elem = document.getElementsByClassName('img-textarea')[0]let imgs = ''if(data.figure.length > 0){for(let item of data.figure){let img= `\n<img src="${item}">`  //css样式中加入white-space:pre-line之后，\n换行才会生效imgs += img}}elem.innerHTML =  data.description + imgs })
}

methods中在文本框内粘贴图片触发的操作
（这步操作是借鉴了某个大大分享的文章，但是当时看的太多，偶找不到啦！）

descImgPaste(event){if (event.clipboardData || event.originalEvent) {let clipboardData = (event.clipboardData || event.originalEvent.clipboardData);if(clipboardData.items){let  blob;for (let i = 0; i < clipboardData.items.length; i++) {if (clipboardData.items[i].type.indexOf("image") !== -1) {blob = clipboardData.items[i].getAsFile();}}let render = new FileReader();render.onload = function (evt) {//输出base64编码let base64 = evt.target.result;let imgElem = document.createElement('img')imgElem.src = base64document.getElementsByClassName('img-textarea')[0].appendChild(imgElem)}if(blob){render.readAsDataURL(blob);}}}},

methods中编辑后点击确定做的操作

confirm(){this.dialogVisible= falselet result= document.getElementsByClassName('img-textarea')[0].innerHTML
}

要在textarea文本框中粘贴图片怎么办？相关推荐

在文本框中插入图片:
在文本框中插入图片: <input type="text" class="search" maxlength="180" value= ...
Javascript - 获取到textarea文本框中的回车换行符 - 收集/实践 --- 20201005
1.应用场景主要用于获取到textarea文本框中的回车换行符 2.学习/操作 1. 文档 javascript获取到textarea文本框中的回车换行符 - Wuya - 博客园 js如何识别出字 ...
如何设置textarea文本框中的内容为只读不可修改状态
设置<textarea>文本框中的内容为只读不可修改状态,只需要加入disabled或readonly即可 <textarea name="qualification&qu ...
HTML5 实现给Text文本框中加入图片
<style type="text/css">input{/*文本框的大小*/width:200px;height: 35px;/*图片*/background: ur ...
Word2010 如何解决文本框中的图片不能设置文字环绕的终极方法！！！
今天我在起草一份简历,用到了文本框,因为文本框可以搞一些比较艺术的东东,当我把我的照片放上去的时候,突然就冒出来一个大问题 ...什么问题呢? 请看图: 问题出在哪里? 那就是我们无法在个人信息处从 ...
python图片显示文本框_Python3 tkinter基础 Text image 文本框中插入图片
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda : 4.5.11 typesetting : Markdown ...
Html中文本域中加图片,如何在文本框中加图片
2007-06-21 怎么添加留言板.最新文章列表.最新评论.最新留言--的这些字背后的背景图片?我按照这些添加都不能成功,图片地址也是网络上的,也加了空格键:更换页面留言板标题栏下翻时的图片的源代码 ...
java word文本框_Java 读取Word文本框中的文本、图片、表格
Word可插入文本框,文本框中可嵌入文本.图片.表格等内容.对文档中的已有文本框,也可以读取其中的内容.本文以Java程序代码来展示如何读取文本框,包括读取文本框中的文本.图片以及表格等. [程序环境 ...
Java 读取Word文本框中的文本、图片、表格
Word可插入文本框,文本框中可嵌入文本.图片.表格等内容.对文档中的已有文本框,也可以读取其中的内容.本文以Java程序代码来展示如何读取文本框,包括读取文本框中的文本.图片以及表格等. [程序环境 ...

要在textarea文本框中粘贴图片怎么办？

项目需求：

拆解需求：

实际做法

要在textarea文本框中粘贴图片怎么办？相关推荐

最新文章

热门文章