码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2016-08-13 15:33:22      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:

技术分享

没改动之前是上面这样的,图片显示不开,撑出了滚动条,想让他自适应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 上传的图片在内容里显示的尺寸过大的问题

标签:

原文地址:http://www.cnblogs.com/lanchar/p/5767958.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!