最近使用富文本编译器在测试的时候发现一个问题
正常情况下我们会点击富文本输入内容,最后点击图片上传,但是用户存在直接点击图片上传的操作,这种情况在移动端的设备下比较常见。但是在form表单里,输入其他文本框后,此时焦点在其他文本框中,直接点击富文本的上传图片按钮,出现了问题。
未获取焦点的时候直接点击图片上传会上传成功但是图片不显示。
wangEditor官方文档传送 wangEditor传送入口
插入图片配置代码
this.editor.config.customUploadImg = function(resultFiles, insertImgFn) {
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后,插入到编辑器的方法
resultFiles.forEach(item => {
that
.axios({
url: that.baseUpload.host,
method: 'POST',
data: params
})
.then(res => {
let data = res.data;
// data.url = res.data.resourceUrl;
data.url = res.data.resourceUrl;
// 上传图片,返回结果,将图片插入到编辑器中
insertImgFn(data.url);
})
.catch(err => {});
});
};
如图,大家的配置代码可能不一致,但是没关系,在图片上传插入的配置中加入一行代码就可以了。这也是花了很久时间从原型链上找到的方法initSelection(), 作用是初始化选定区域。
在文件上传的时候初始化一下选区就ok了。