项目场景:项目中使用到了百度编辑器,新增需求是将微信图片复制到编辑器中。
问题描述:
将复制的图片直接贴到编辑器中不会有任何变化,编辑器中没有内容。
解决方案:
首先获取给编辑器添加粘贴的监听事件,然后获取到粘贴的图片文件,使用formData传输到后台,再将图片添加到编辑器中。看代码
// 初始化编辑器
this.instance = UE.getEditor(this.randomId, this.ueditorConfig);
this.handler = (e)=>{
if(e.defaultPrevented&&e.clipboardData.files[0]){
// 获取粘贴板的图片数据
const file = e.clipboardData.files[0]
let formDatas = new FormData();
formDatas.append("file", file);
uploadPics(formDatas).then(res=>{
// 发送请求
let pics = process.env.VUE_APP_BASE_API + res.pics
let img = `<img src="${pics}"><p></p>`
// 最后将图片重新拼接到编辑器的内容中
const inner = this.instance.getContent()+img
this.instance.setContent(inner)
}
}
// 添加粘贴事件
this.instance.document.addEventListener('paste',this.handler)
});