关于百度编辑器UEditor中图片手机端自适应,手机端展示的图片超出屏幕的问题

最新推荐文章于 2022-09-14 22:23:49 发布

原创最新推荐文章于 2022-09-14 22:23:49 发布 · 置顶 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#UEditor #百度编辑器 #H5 #php #Javasrcipt

tp5 同时被 3 个专栏收录

5 篇文章

订阅专栏

php技术栈

4 篇文章

订阅专栏

2 篇文章

订阅专栏

本文解决了百度编辑器中图片在手机端不自适应的问题，通过修改image.js文件中的宽高属性设置，并调整页面样式，实现图片在移动端的正确显示。

百度编辑器中添加的图片在手机端不能自适应问题

做网站经常要用到百度编辑器，页面的渲染我们一般用{$content}来显示，这时候在手机端就会出现首先宽度过宽超过手机尺寸的问题，用max-width:100%;限制之后呢又会发现高度还是那么高，没有进行等比例缩放，找了下度娘下面列一下解决方法：
经过调试发现，<img>标签中的style就是影响移动端自适应的问题所在。将整个style删除后，既不会影响PC端图片大小，也会使自适应恢复。
百度编辑器呢会自动把添加的图片设置宽高属性，所以我们要把这两行代码干掉——找到js所在位置ueditor/ueditor/dialogs/image，找到image.js文件，打开编辑，第272行和279行分别设置了宽高属性，将其屏蔽即可style: "width:" + data['width'] + "px;height:" + data['height'] + "px;"
然后在页面稍加限制

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>