2019-01-21 孙小北

UEditor上传图片大小过大且不可以自适应

使用UEditor上传图片时,图片过大超出编辑框,手机没法自适应。折腾啊折腾,记录一下。

之前上传图片很大没怎么理会,手动调一下,最近发现在手机上查看没法自适应,很是烦,便想着改掉这个问题。

方式一、修改ueditor.all.js   找到render:function(container){}    亲测可用(推荐)

好像其他项目不记得是使用js还是min.js ,所幸两个都加了一下ueditor.all.js和ueditor.all.min.js

//设置图片最大宽度,以免撑出滚动条    
'img{max-width:100%;}'+

1.png

手机自适应相应页面增加样式即可

<style>
   /*解决UEditor上传图片问题*/
  img {
   max-width: 100%; /*图片自适应宽度*/ 
   height: auto;
  }
</style>

方式二、修改ueditor.all.js   找到callback ()  (不推荐)

只能编辑页面适应大小,但是手机无法自适应。

loader.setAttribute('style','max-width:650px');//设置上传图片最大宽度

方式三、提交编辑器内容时,修改图片属性(未测试)原理同方式一

$str = preg_replace('/(<img).+(src=\"?.+)images\/(.+\.(jpg|gif|bmp|bnp|png)\"?).+>/i',"\${1} \${2}uc/images/\${3}>",$str);
return  str_replace('<img','<img width="100%" height="auto"',$str);


编辑:孙小北

本文地址: https://www.xiaowangyun.com/wyblog/detail/?id=1043

版权归属: www.xiaowangyun.com   转载时请以链接形式注明出处

0 条评论

快来评论

物以类聚

最新评论

2017-10-06

一辈子不长,只有珍惜了,才不至于后悔。

2017-10-06

懂得感恩,才能走得更远。

标签云

归档

取消

感谢您的支持,您的每一次打赏都是一次鼓励!

扫码支持
每一次支持,都是不懈的动力

打开支付宝扫一扫,即可进行扫码打赏哦