百度富文本编辑器 ueditor 上传图片
宽高超范围问题完整解决方案
百度 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;}
2.修改 Ueditor\ueditor.config.js 下面的一句,去掉前面的注释//给编辑器内部引入
iframe.css 文件。
//,iframeCssUrl: URL + '/themes/iframe.css'
(二)方法二,修改 Ueditor\ueditor.all.js 或 Ueditor\ueditor.all.min.js
1.在 ueditor.all.js 里找到 render: function (container) {加入一行
'img{max-width:100%;}' +
//设置默认字体和字号
//font-family 不能呢随便改,在 safari 下 fillchar 会有解析问题
'body{margin:8px;font-family:sans-serif;font-size:16px;}' +
//加这一行,控制图片默认宽度
'img{max-width:100%;}' +
//设置段落间距
'p{margin:5px 0;}' +
(options.iframeCssUrl ? '
utils.unhtml(options.iframeCssUrl) + '\'/>' : '' ) +
2.在 ueditor.all.min.js 里找到如下地方加入 img{max-width:100%;}。
二、解决网页显示不好看
分两种情况
(一)在编辑器外部插入图片时
在添加图片的地方的关键代码如下,主要是插入代码时加入点击图片后跳转大图和控制宽
高的代码。
(二)在编辑器内部插入图片时(也就是用它自带的按钮插入)
打开\ueditor\ueditor.all.min.js
1.修改单图上传按钮代码,查找 getOpt("imageActionName")处后面的
b.execCommand("inserthtml",'

')
在 img 内加入 width="100%" onclick="window.open(this.src)"即可,如下:
b.execCommand("inserthtml",'

')
2.修改多图上传按钮代码,查找
edui-faked-video"==a.className&&-1==a.className.indexOf("edui-upload-video")处后
面(注意接连有 2 处)
a='