ueditor 上传的图片在内容里显示的尺寸过大的问题
网上有方法
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:iframeCssUrl: '__PUBLIC__/other/ueditor/themes/iframe.css',// 引入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>';
其实就加了一句
其实,还是2好用,只加了一句:'img{max-width:100%;}'+
当然,如果你也和我一样用的是ZB的话,如果有的主题发的文章的图片会超出文章页的话,也可以用第3种方法:
3、修改主题的default.css,目录位置:/zb_users/theme/主题名/style/。
如果想省事的话,可以在最后添加:img{max-width:100%;}即可。这样的后果就是所有的图片全部按100%显示了。如果想精细一点的话,可以在css中找到文章内容块的CSS设置,在其中的img中添加max-width:100%;,如果你用的是chrome内核的浏览器,可以点F12,一个框架一个框架的查找文章内容块的CSS详细位置。
如果内容对你有用,请花费几秒钟给个评论!
由于评论审核机制,可能您的评论暂时不可见,不影响查看回复可见的内容!
扫描二维码推送至手机访问。
版权声明:本文由云淡风轻Mr.Liu发布,如需转载请注明出处。