百度编辑器上传图片后自适应问题

本文介绍如何解决使用UEditor上传图片时遇到的自适应问题。通过调整<img>标签中的style属性,可以确保图片在不同设备上显示一致。

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

 利用百度编辑器上传文章内容后有时我们还需要添加图片来丰富我们的文章,这时就要利用编辑器上传图片,但有时候不小心会把上传的图片给拉伸,造成浏览时图片大小不一样,

经过调试发现,<img>标签中的style就是影响移动端自适应的问题所在。将整个style删除后,既不会影响PC端图片大小,也会使自适应恢复。这也是吃了直接用网上代码,先森自己没有研究过自适应的亏,发现问题还绕了很大的弯。

通过排查发现,只要通过百度UEditor编辑器设置图片的宽高,即会自动添加width、height、border、vspace以及style属性,style属性中也包含width与height,也就是编辑器同时设置了两组宽高。而我们要做到的是使UEditor编辑器设置图片宽高时,不添加style属性。

通过在官方文档中寻找解决方法无果后,开始在插件中的代码中寻找,终于找到了关键代码。

在服务器中打开自己的编辑器路径,找到/ueditor/ueditor/dialogs/image,找到image.js文件,打开编辑

找到style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"直接给注释掉就可以


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值