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

最新推荐文章于 2024-08-06 17:23:46 发布

原创最新推荐文章于 2024-08-06 17:23:46 发布 · 5.4k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue #前端

前端专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种实现图文混排编辑功能的方法，通过使用contenteditable属性的div元素，结合自定义事件处理，实现了既能展示预设图文信息，又支持用户编辑和粘贴图文的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

项目需求：

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

拆解需求：

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

实际做法

最开始我试图直接使用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= true
	this.$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 = base64
                    document.getElementsByClassName('img-textarea')[0].appendChild(imgElem)
                }
                if(blob){
                    render.readAsDataURL(blob);
                }
            }
        }
    },

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

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