logo资料库

百度富文本编辑器ueditor上传图片宽高超范围问题2018.7.3补充.doc

第1页 / 共3页
第2页 / 共3页
第3页 / 共3页
资料共3页,全文预览结束
百度富文本编辑器 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=''+e.alt+

在 img 内加入 onclick=
分享到:
收藏