项目需求:
有一条描述信息(文字 + 图片),点击编辑,文本框中显示描述信息,并且可以对描述信息做出修改
拆解需求:
- 文本框里要能显示预设的值(文字 + 图片)
- 文本框里还要能支持粘贴文字与图片
实际做法
最开始我试图直接使用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
}