立即注册 找回密码

QQ登录

只需一步,快速开始

查看: 265|回复: 1
打印 上一主题 下一主题

laravel 使用ueditor上传图片,在编辑器里超出边界的解决办法

[复制链接]
上传图片后,如果图片太大,将撑破编辑框的边界,需要用鼠标拖动四个角缩放,非常不方便。解决办法,加css即可。在/public/vendor/ueditor/themes/目录里,有个iframe.css 加入以下代码:
  1. /*可以在这里添加你自己的css*/
  2. img {??
  3. max-width: 100%; /*图片自适应宽度*/??
  4. }??
  5. body {??
  6. overflow-y: scroll !important;??
  7. }??
  8. .view {??
  9. word-break: break-all;??
  10. }??
  11. .vote_area {??
  12. display: block;??
  13. }??
  14. .vote_iframe {??
  15. background-color: transparent;??
  16. border: 0 none;??
  17. height: 100%;??
  18. }??
  19. #edui1_imagescale{display:none !important;}
复制代码

效果:


另一方法是,修改编辑器的all.js文件,ueditor下ueditor.all.js: 添加
  1. img{max-width:100%;}
复制代码



哎...今天够累的,签到来了...
沙发
?楼主| 发表于 2019-9-22 18:56:30 | 只看该作者
另外,在上传完图片,提交后,前台查看时发现,img标签也没有width属性,导致无法自适应宽度。解决办法,编辑public/vendor/ueditor/ueditor.all.js第24461行,添加 width="100%"即可:

修改后的代码如下:
  1. ? ?? ?? ?? ?? ? me.execCommand('inserthtml', '');
复制代码
效果如下:




哎...今天够累的,签到来了...
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|Archiver|梦飞文学网 ( 赣ICP备15004458号-1 )???

GMT+8, 2019-11-4 16:07 , Processed in 0.075618 second(s), 30 queries .

Powered by Discuz! X3.4 ? 2001-2013 Comsenz Inc & yjwx

快速回复 返回顶部 返回列表