利用百度编辑器上传文章内容后有时我们还需要添加图片来丰富我们的文章,这时就要利用编辑器上传图片,但有时候不小心会把上传的图片给拉伸,造成浏览时图片大小不一样,
经过调试发现,<img>标签中的style就是影响移动端自适应的问题所在。将整个style删除后,既不会影响PC端图片大小,也会使自适应恢复。
通过排查发现,只要通过百度UEditor编辑器设置图片的宽高,即会自动添加width、height、border、vspace以及style属性,style属性中也包含width与height,也就是编辑器同时设置了两组宽高。而我们要做到的是使UEditor编辑器设置图片宽高时,不添加style属性。
通过在官方文档中寻找解决方法无果后,开始在插件中的代码中寻找,终于找到了关键代码。
在服务器中打开自己的编辑器路径,找到/ueditor/ueditor/dialogs/image,找到image.js文件,打开编辑,找到272行 注释掉以下3行代码
width: data['width'] || '', height: data['height'] || '', style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"
修改后代码:
getInsertList: function () {
var data = this.getData();
if(data['url']) {
return [{
src: data['url'],
_src: data['url'],
//width: data['width'] || '',
//height: data['height'] || '',
border: data['border'] || '',
floatStyle: data['align'] || '',
vspace: data['vhSpace'] || '',
title: data['title'] || '',
alt: data['title'] || '',
//style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"
}];
} else {
return [];
}
}
};更改后的效果图,iphone8p下
![1553927863850243.png F_@L}QMJH`]1LOY_S6VQU5A.png](/ueditor/php/upload/image/20190330/1553927863850243.png)
(๑>ڡ<)☆谢谢老板~
使用微信扫描二维码完成支付
小安
已有 0条评论