成航先森 成航先森

成都航院计算机系一个学生的个人博客

 

WordPress技巧

分段图

最新文章

WordPress技巧
当前位置: 首页 » 大学杂谈 » WordPress技巧 » 解决使用百度UEditor编辑器后移动端图片被拉伸问题

解决使用百度UEditor编辑器后移动端图片被拉伸问题

编辑:狂族晨曦 来源:WordPress技巧 日期:2016-01-20 阅读: 5,185 次 抢个沙发 百度已收录

本站之前的文章,基本存在一个问题:用手机访问,查看文章时图片有明显纵向拉伸问题。之前觉得没什么,但是最近先森的强迫症犯了,非要把这个问题解决了不可。

开始,先森以为是七牛缓存图片的设置问题,但是“七牛云储存”插件、七牛空间管理找来找去,设置多次之后,无奈的发现,问题还是没有解决。再后来,开始怀疑是阿里云主机的问题,但是通过测试也排除了。

最后,通过站长之家的移动跨屏模拟,查看审查元素后发现,图片的高度,是先森在百度UEditor编辑器中给图片设置的高(图片单击放大)。

审查元素 -1

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

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

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

在服务器中打开/wp-content/plugins/ueditor/ueditor/dialogs/image,找到image.js文件,打开编辑(点击放大):

image.js文件 -2

如上图,打开并找到第279行,将以下代码删除或注释:

style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"

如此,即可解决设置图片时自动添加style的问题,也就解决了自适应问题。

有任何疑问,欢迎在下方评论区提出,也欢迎在页面顶部右方关注我的微博(@成航先森)。

标签:
除特别注明外,本站所有文章均为成航先森 www.capjsj.cn原创,本文共808个字
转载请注明出处来自http://www.capjsj.cn/jjsybdueditorbjqhyddtpblswt.html
已有 0 位"计工"发布了激烈的评论,还有N多人围观笑而不语评论
匿名的头像
欢迎发表评论
取消评论

表情
疑问调皮伤心抠鼻黑线微笑可爱奸笑震惊吓到了撇嘴大兵忍不住笑笑狂骂狂怒噢?鼓掌酷⊙﹏⊙b汗鄙视大哭嘿嘿

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
官方微信
发表评论 返回顶部