ueditor 上传的图片在内容里显示的尺寸过大的问题

Posted jianxian

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ueditor 上传的图片在内容里显示的尺寸过大的问题相关的知识,希望对你有一定的参考价值。

技术分享图片

没改动之前是上面这样的,图片显示不开,撑出了滚动条,想让他自适应100%,不出现滚动条

网上有方法

1.ueditor 的 themes 文件夹下有个iframe.css 加入以下代码,保存(原先的css文件应该是空的,只有一行注释)/// 个人感觉没用,调试了一下确实没用不知为什么,放在这了

技术分享图片
img {  
 max-width: 100%; /*图片自适应宽度*/  
}  
body {  
 overflow-y: scroll !important;  
}  
.view {  
 word-break: break-all;  
}  
.vote_area {  
 display: block;  
}  
.vote_iframe {  
 background-color: transparent;  
 border: 0 none;  
 height: 100%;  
}  
#edui1_imagescale{display:none !important;} 
技术分享图片

前台引入css

技术分享图片
<script type="text/javascript">
  var ue = UE.getEditor(‘container‘, {
    toolbars: [
      [‘fullscreen‘,‘source‘,‘undo‘,‘redo‘,‘indent‘,‘bold‘,‘italic‘,‘underline‘,‘fontborder‘,‘snapscreen‘,‘print‘,‘preview‘,‘link‘,‘unlink‘,‘insertrow‘,‘insertcol‘,‘mergeright‘,‘mergedown‘,‘deleterow‘,‘deletecol‘,‘splittorows‘,‘splittocols‘,‘splittocells‘,‘fontfamily‘,‘fontsize‘,‘simpleupload‘,‘insertimage‘,‘spechars‘,‘searchreplace‘,‘justifyleft‘,‘justifyright‘,‘justifycenter‘],
      [‘justifyjustify‘,‘forecolor‘,‘backcolor‘,‘attachment‘,‘imagecenter‘,‘wordimage‘,‘inserttable‘,‘strikethrough‘, ‘superscript‘, ‘subscript‘, ‘removeformat‘, ‘formatmatch‘, ‘autotypeset‘, ‘blockquote‘, ‘pasteplain‘, ‘|‘, ‘forecolor‘, ‘backcolor‘, ‘insertorderedlist‘, ‘insertunorderedlist‘, ‘selectall‘, ‘cleardoc‘]
    ],
    iframeCssUrl: ‘__PUBLIC__/other/ueditor/themes/iframe.css‘,// 引入css
    autoHeightEnabled: true,
    autoFloatEnabled: true
  });
</script>
技术分享图片

 

 

2.ueditor.all.js 找到render:function(container){}修改如下:、// 亲测好用

技术分享图片
var html = ( ie && browser.version < 9  ? ‘‘ : ‘<!DOCTYPE html>‘) +
                    ‘<html xmlns=\\‘http://www.w3.org/1999/xhtml\\‘ class=\\‘view\\‘ ><head>‘ +
                    ‘<style type=\\‘text/css\\‘>‘ +
                    //设置四周的留边
                    ‘.view{padding:0;word-wrap:break-word;cursor:text;height:90%;}\\n‘ +
                    //设置默认字体和字号
                    //font-family不能呢随便改,在safari下fillchar会有解析问题
                    ‘body{margin:8px;font-family:sans-serif;font-size:16px;}‘ +
                    //设置图片最大宽度,以免撑出滚动条
                ‘img{max-width:100%;}‘+
                    //设置段落间距
                    ‘p{margin:5px 0;}</style>‘ +
                    ( options.iframeCssUrl ? ‘<link rel=\\‘stylesheet\\‘ type=\\‘text/css\\‘ href=\\‘‘ + utils.unhtml(options.iframeCssUrl) + ‘\\‘/>‘ : ‘‘ ) +
                    (options.initialStyle ? ‘<style>‘ + options.initialStyle + ‘</style>‘ : ‘‘) +
                    ‘</head><body class=\\‘view\\‘ ></body>‘ +
                    ‘<script type=\\‘text/javascript\\‘ ‘ + (ie ? ‘defer=\\‘defer\\‘‘ : ‘‘ ) +‘ id=\\‘_initialScript\\‘>‘ +
                    ‘setTimeout(function(){editor = window.parent.UE.instants[\\‘ueditorInstant‘ + me.uid + ‘\\‘];editor._setup(document);},0);‘ +
                    ‘var _tmpScript = document.getElementById(\\‘_initialScript\\‘);_tmpScript.parentNode.removeChild(_tmpScript);</script></html>‘;
技术分享图片

其实就加了一句

经实验,还是第二种好用

以上是关于ueditor 上传的图片在内容里显示的尺寸过大的问题的主要内容,如果未能解决你的问题,请参考以下文章

ueditor 控制上传图片的显示尺寸

UEditor 自定义图片视频尺寸校验

怎么修改百度编辑器(Ueditor)的上传图片大小限制,PHP版的

百度的富文本编辑器UEditor添加图片自动加上宽度和高度的属性

服务器上的图片上传尺寸(像素)限制

uni-app 图片上传压缩方法 拍照图片过大