百度UEditor插入图片尺寸自动适应编辑框大小问题
我的图书馆
百度UEditor插入图片尺寸自动适应编辑框大小问题
昨天我使用百度UEditor，上传大图变的好大。不能够自动的缩写和编辑框内大小一样，找了半天代码没发现怎么修改，让它上传缩小，在config中 “imageCompressBorder”: 1600, /* 图片压缩 最长边限制 */没什么作用呢。最后还是被我找到了，下面我就来给大家说说如果才能UEditor插入图片尺寸自动适应编辑框大小
首先我们找到如下文件：
\ueditor\themes\iframe.css
从这个文件里，就能看到有这一句：/*可以在这里添加你自己的css*/
哈哈，接下来，我们写css吧：
———————————-
max-width: 100%; /*图片自适应宽度*/
overflow-y: scroll !
word-break: break-
.vote_area {
.vote_iframe {
background-color:
height: 100%;
#edui1_imagescale{display:none !} /*去除点击图片后出现的拉伸边框*/
————————————
把以上横线里面的代码复制到编辑里面 保存 上传覆盖然后清理一下浏览器的缓存都可以使用了。
大家可以修改后的预览：
TA的最新馆藏Ueditor1.4.3上传图片参照宽度或高度进行压缩默认最长边
Ueditor这款富文本编辑软件在早期版本中，上传图片时可以配置参数，按照宽度或者高度进行等比例压缩，但是升级到1.4.3版本后就取消了这个功能，只提供按照最长边进行压缩，那么就存在一种情况，当类似于长微博这样的超长图片上传时，会按照设定好的像素值，作为高度的上限，同时对宽度进行等比例压缩，那么压缩出来的图片就成了宽度非常小的细长图片，完全无法识别图片中的内容。
经过调试与测试，通过增加配置参数与调整判断代码的手段，依然可以按照自己选定的方式进行图片压缩处理。
首先找到Ueditor的配置文件ueditor.json，添加如下代码：
"imageCompressSide"&:&1,/*等比压缩的基准，0为按照最长边，1为按照宽度，2为按照高度&1.4.3官方版本无此参数，自行添加&*/
其次找到ueditor/dialogs/image/image.js，找到如下代码
修改为如下代码：
compress:&editor.getOpt('imageCompressEnable')&?&{
&&&&width:&'1'&==&editor.getOpt('imageCompressSide')&?&imageCompressBorder&:&99999,
&&&&height:&'2'&==&editor.getOpt('imageCompressSide')&?&imageCompressBorder&:&99999,
保存即可生效，这样再上传图片时，会自动判断按照什么边为基准进行压缩。
更多相关文章
css中指定元素的最小最大宽度与高度我们有min-height,min-width 这类方法,下面我基于它们来做一些控制页面等比例实例.IE6最小最大宽度: 代码如下 .min-width { min-width:600 _width:expression(document.body.clie ...
在Android中,有时需要对控件进行测量,得到的控件宽度和高度可以用来做一些计算.在需要自适应屏幕的情况下,这种计算就显得特别重要.另一方便,由于需求的原因,希望一进入界面后,就能得到控件的宽度和高度.可惜的是,根据我的验证,利用网上转载的那些方法在OnCreate函数中获取到的仍然是0(希望搞技 ...
摘注]:以下说法不准确,不是有没有DOCTYPE声明,而是不同的DOCTYPE声明对js的处理有影响. 在没有DOCTYPE声明的情况下: document.body.clientWidth document.body.clientHeight 为当前窗口的宽度/高度; 在DOCTYPE声明以后 d ...
如题,刚学css不久,对于这些标签之类的特点还不是很熟悉,求指导 block element.inline element /KeithWang/p/3139517.html 因为p标签为块级元素,而span标签是内联元素,内联元素的height以及wid ...
在ListView中为了实现图片宽度100%适应ImageView容器宽度,让高度自动按比例伸缩功能,查了很多资料,搞了一下午都没找出个现成的办法,不过貌似有个结论了,就是: Android自身不能实现这样的效果,只有自己动手丰衣足食 ImageView 中有个 scaleType 属性,设置图片在 ...
var temp_iframe var content = document.getelementbyid('right'); //id为 right的dom容器中,进行创建iframe和宽高自适应 var c = 0; function append(filename) { var the_ifr ...
我被sofish大神御人术送了出去 就是如题问题 我就是不知道ie8怎么办 所以没答得. 求各位大神告知 补充一个居中的系类:居中之美 前端观察-五种居中方法 /cecuwe/edit?html,css,output 好吧 我找到一种我觉得不错的 .con-ghost ...
来源::: http://www.jb51.net/web/127480.html
FTP服务器是众多服务器中会配置的一个软件了,不管是利用程序上传文件还是ftp软件都可以安装FTP服务器之后进行操作了,下面一起来看看Vsftpd 配置FTP服务器教程.安装ftp安装完毕后,默认配置下就可以直接登录 ...
iOS8 Health怎么用?Health中文就是健康的意思,现在很多手机都有健康这个功能 ...
本文我们来分享一个解决SQLServer中bigint转int带符号时报错的函数BigintToInt,错误是:将 expression 转换为数据类型 int 时出现算术溢出错误,因为状态码中已经用到了 0x800 ...
今天上午,联想正式公布了 2015 / 16 财年第一季的财报,数据显示其在这三个月中的营 ...
在Linux上搭建solr集群时需要用到负载均衡,但测试环境下没有F5 Big-IP负载均 ...
发布日期:4更新日期:8受影响系统:AlienVaul ...
upstart 1.23 发布,此版本更新内容如下:允许直接夺取控制台权限来停止 Upst ...
摩托罗拉Krave ZN4支持蓝牙无线传输技术,支持V CAST电视以及V CAST视频播 ...
SuperSocket 1.5.2 今天正式发布了,该版本修复了几个在1.5.0和1.5. ...后使用快捷导航没有帐号？
只需一步，快速开始
查看: 18837|回复: 19
kindeditor为上传的图片指定width height属性
UID578057在线时间 小时积分1437帖子离线17215 天注册时间
银牌会员, 积分 1437, 距离下一级还需 1563 积分
高手们 帮帮忙啊 一点体力 希望不要嫌少
情况是这样的：
&&后台用的是kindeditor编辑器&&在写文章的时候 有时会插入图片&&在数据库中就会生成img标签
我希望在插入图片后 生成的img标签 带有width 和height属性 如
&img src=''&&width=默认宽度& &height=默认高度 /&
虽然kindeditor默认是让图片尺寸为默认宽高的& & 我希望他能明确添加这两个属性
因为我前台的文章列表页 是用ajax请求 文章详情的
当返回数据 写入dom后&&页面的滚动条会根据高度增加而变化（滚动条是自己写的，但滚动内容发生变化时 要调用一些滚动条高度设置函数）
如果没有明确指定width 和height属性 页面要等图片加载完乘后 才能调用滚动条高度变化的函数 所以那样的话 就要监听请求的文章中的所有img是否在本地缓存中 如果都在的话 才调用滚动条高度函数 这样比较麻烦
不知道我说清楚了没
总之一句话 就是在kindeditor中 插入的图片img元素&&给他一个width和height属性 等于图片默认的宽高，要以px为单位
你说的就是我前面说的那段代码，另外在image.js里面有上传的相关代码，希望对你有帮助，我也在用这个编辑器，目前了解的就这些。
UID648811在线时间 小时积分1519帖子离线17215 天注册时间
银牌会员, 积分 1519, 距离下一级还需 1481 积分
chocho 发表于
你好&&这是我刚找出来的 kindeditor.js中的东西&&是不是要给他穿个参数就可以了啊 你知道该怎么传吗
你说的就是我前面说的那段代码，另外在image.js里面有上传的相关代码，希望对你有帮助，我也在用这个编辑器，目前了解的就这些。
UID648811在线时间 小时积分1519帖子离线17215 天注册时间
银牌会员, 积分 1519, 距离下一级还需 1481 积分
打开kindeditor.js找到下面这句,大约在3168行附近var html = '&img src=&' + _escape(url) + '& data-ke-src=&' + _escape(url) + '& ';复制代码var html = '&img width=&100px& height=&100px& src=&' + _escape(url) + '& data-ke-src=&' + _escape(url) + '& ';复制代码JS初学，水平有限，只能帮你到这里了，呵呵
UID578057在线时间 小时积分1437帖子离线17215 天注册时间
银牌会员, 积分 1437, 距离下一级还需 1563 积分
Now 发表于
打开kindeditor.js找到下面这句,大约在3168行附近JS初学，水平有限，只能帮你到这里了，呵呵
兄弟 不是要限制宽高啊 这样的话 没个图片的宽高都一样了&&
我需要图片保持原始尺寸啊&&就是width=‘原始宽’&&height=‘原始高’
UID578057在线时间 小时积分1437帖子离线17215 天注册时间
银牌会员, 积分 1437, 距离下一级还需 1563 积分
Now 发表于
打开kindeditor.js找到下面这句,大约在3168行附近JS初学，水平有限，只能帮你到这里了，呵呵
你好&&这是我刚找出来的 kindeditor.js中的东西&&是不是要给他穿个参数就可以了啊 你知道该怎么传吗
_extend(KCmd, {
& & & & & & & & insertimage : function(url, title, width, height, border, align) {
& & & & & & & & title = _undef(title, '');
& & & & & & & & border = _undef(border, 0);
& & & & & & & & var html = '&img src=&' + _escape(url) + '& data-ke-src=&' + _escape(url) + '& ';
& & & & & & & & if (width) {
& & & & & & & & & & & & html += 'width=&' + _escape(width) + '& ';
& & & & & & & & }
& & & & & & & & if (height) {
& & & & & & & & & & & & html += 'height=&' + _escape(height) + '& ';
& & & & & & & & }
& & & & & & & & if (title) {
& & & & & & & & & & & & html += 'title=&' + _escape(title) + '& ';
& & & & & & & & }
& & & & & & & & if (align) {
& & & & & & & & & & & & html += 'align=&' + _escape(align) + '& ';
& & & & & & & & }
& & & & & & & & html += 'alt=&' + _escape(title) + '& ';
& & & & & & & & html += '/&';
& & & & & & & & return this.inserthtml(html);
& &&&& & & & }
UID578057在线时间 小时积分1437帖子离线17215 天注册时间
银牌会员, 积分 1437, 距离下一级还需 1563 积分
Now 发表于
你说的就是我前面说的那段代码，另外在image.js里面有上传的相关代码，希望对你有帮助，我也在用这个编辑 ...
问题解决&&谢谢
UID640229在线时间 小时积分7帖子离线17215 天注册时间
新手上路, 积分 7, 距离下一级还需 43 积分
问题解决&&谢谢
怎么修改呢，好想知道。
UID578057在线时间 小时积分1437帖子离线17215 天注册时间
银牌会员, 积分 1437, 距离下一级还需 1563 积分
怎么修改呢，好想知道。
在点击提交文章按钮时 用js遍历from下的所有图片 把他设置为默认高宽的&&不过在代码模式下 正文的数据就不在from下了&&
所以在代码模式下 我是提醒用户切换至视图模式再提交的&&当然如果禁用了代码模式 也就没有这一步了&&
UID663178在线时间 小时积分8帖子离线17215 天注册时间
新手上路, 积分 8, 距离下一级还需 42 积分
刚好遇到这个问题，看了楼主的解决方案豁然开朗啊，我开始想了好几个方案：
1、加载页面js扫描一遍img标签，然后判断宽高，再根据需求手动设置；
2、关闭图片拉伸设置宽高，用css限制（默认未拉伸设置宽高的图片无宽高属性），但是拉伸设置过的就会失效；
3、修改kindeditor的js给图片添加onload事件，加载的时候判断然后动态设置宽高；
最后发现楼主的方法最简洁、靠谱。
UID435716在线时间 小时积分222帖子离线17215 天注册时间
中级会员, 积分 222, 距离下一级还需 278 积分
资历较浅，没看明白，呵呵。
UID575709在线时间 小时积分368帖子离线17215 天注册时间
中级会员, 积分 368, 距离下一级还需 132 积分
在点击提交文章按钮时 用js遍历from下的所有图片 把他设置为默认高宽的&&不过在代码模式下 正文的数据 ...
你好朋友可以说的详细点吗？ 我寻求这个方法很久了&&可是一直不能实现！ 感激朋友了！
UID578057在线时间 小时积分1437帖子离线17215 天注册时间
银牌会员, 积分 1437, 距离下一级还需 1563 积分
你好朋友可以说的详细点吗？ 我寻求这个方法很久了&&可是一直不能实现！ 感激朋友了！
在编辑文章的时候&&有代码模式 和试图模式&&试图模式的话 你加入的图片 是会在html里面生成img标签的&&（是在一个iframe下）
这个时候 如果你按提交 你就遍历iframe&&把文章里面的图片都加上width=图片的原始宽度 height=原始高度
至于这个图片的原始高度 和宽度怎么得到&&你可以百度一下&&（原始高度就是图片的本来高度 ）
UID575709在线时间 小时积分368帖子离线17215 天注册时间
中级会员, 积分 368, 距离下一级还需 132 积分
在编辑文章的时候&&有代码模式 和试图模式&&试图模式的话 你加入的图片 是会在html里面生成img标签的&&（ ...
这个问题我已经困扰我很多天了！ 我对JS 不懂&&你可以把JS 代码 给我吗？ 我在百度查了很久也没结果
谢谢朋友把你的代码给我 感激了！ 谢谢！
UID578057在线时间 小时积分1437帖子离线17215 天注册时间
银牌会员, 积分 1437, 距离下一级还需 1563 积分
这个问题我已经困扰我很多天了！ 我对JS 不懂&&你可以把JS 代码 给我吗？ 我在百度查了很久也没结果
大概是这样的：
function kindE(){
& & & && &&&var doc=
& & & & & & & & var iframe=doc.getElementsByTagName('iframe')[0],//获取iframe
& & & & & & & & & & & & oldAllImgSrcArray=[],//这个是在文章编辑的时候 文章里面原有的图片数组
& & & & & & & & & & & & newAllImgSrcArray=[],//这个保存编辑之后点击保存 那时的图片
& & & & & & & & & & & & iframeAllImgSrc='',
& & & & & & & & & & & & delImgSrc='',
& & & & & & & & & & & & iframeIMG;
& & & & if(iframe.style.display=='none'){alert('请切换至视图模式再提交数据');}
& & & & if(!Blank(doc.getElementById('bt'))){alert('标题不能为空');}
& & & & //设置img宽高 并取得iframe下的所有图片
& & & & iframeIMG=iframe.contentWindow.document.getElementsByTagName('img');
& & & & if(iframeIMG.length&0){
& & & & & & & & for(var i=0;i&iframeIMG.i++){
& & & & & & & & var thisImg=iframeIMG[i],w,h;
& & & & & & & & iframeAllImgSrc+=thisImg.getAttribute('src')+'|';
& & & & & & & & w=thisImg.
& & & & & & & & h=thisImg.
& & & & & & & & if(w&720){
& & & & & & & & & & & & thisImg.width=720;
& & & & & & & && &&&thisImg.height=720*h/w;
& & & & & & & & & & & & }else{
& & & & & & & & & & & & & & & & thisImg.width=w;
& & & & & & & & & & & & & & & & thisImg.height=h;
& & & & & & & & & & & & & & & & }
& & & & & & & & }
& & & && &&&}//if结束
& & & & //取得oldAllImgSrc中要删除的图片
& & & & if(oldAllImgSrc!=''){
& & & & & & & & oldAllImgSrcArray=oldAllImgSrc.split(&|&);
& & & && &&&for(var k=0;k&oldAllImgSrcArray.k++){
& & & & & & & &&&var thisOldsrc=oldAllImgSrcArray[k];
& & & & & & & &&&if(iframeAllImgSrc.indexOf(thisOldsrc)==-1){delImgSrc+=thisOldsrc+'|';}
& & & & & & & &&&}
& & & && && &}
& & & & //取得newAllImgSrc中要删除的图片
& & & & if(newAllImgSrc!=''){
& & & & & & & & newAllImgSrcArray=newAllImgSrc.split(&|&);
& & & && &&&for(var k=0;k&newAllImgSrcArray.k++){
& & & & & & & &&&var thisNewsrc=newAllImgSrcArray[k];
& & & & & & & &&&if(iframeAllImgSrc.indexOf(thisNewsrc)==-1){delImgSrc+=thisNewsrc+'|';}
& & & & & & & &&&}
& & & & & & & &&&newAllImgSrc=''
& & & && && &}
& & & & //删除图片
& & & & if(delImgSrc!=''){
& & & && && &var url='wz_del.asp?delImgSrc='+delImgS
& & & && && &getAjax(url);
& & & && && &}
& & & & & & & & oldAllImgSrc='';
//取得HTML内容
html = KE.html('nr');
//同步数据后可以直接取得textarea的value
KE.sync('nr');
html = document.getElementById('nr').
html = $('#nr').val(); //jQuery
//设置HTML内容
KE.html('editor_id', 'HTML内容');
return wz_check();
}//kindE结束
大概就是这样把&&你可能需要改一下&&找了好久&&我都不记得了
UID575709在线时间 小时积分368帖子离线17215 天注册时间
中级会员, 积分 368, 距离下一级还需 132 积分
大概是这样的：
function kindE(){
& & & && &&&var doc=
你好 朋友请问这段 代码怎么调用的？？
UID578057在线时间 小时积分1437帖子离线17215 天注册时间
银牌会员, 积分 1437, 距离下一级还需 1563 积分
你好 朋友请问这段 代码怎么调用的？？
这位兄台 问了好几次了&&实在是不好意思&&一直没什么时间 今天整理了下之前的东西&&写了注释的
因为是iframe嵌套&&只能用静态压缩了 你下载下去看一下&&兼容性没测过 应该都能通过&&只是在谷歌下 可能本地iframe嵌套 获取不到子页的元素&&你在同一个域下 用http的方式看看&&有什么问题 可以qq我&&我有时间就回你
00:04 上传
点击文件名下载附件
1.92 KB, 下载次数: 70
UID575709在线时间 小时积分368帖子离线17215 天注册时间
中级会员, 积分 368, 距离下一级还需 132 积分
这位兄台 问了好几次了&&实在是不好意思&&一直没什么时间 今天整理了下之前的东西&&写了注释的
不好意思朋友我的 程序不是 框架kindeditor
是 &textarea name=&body& style=&height:450visibility:width: 100%;&&&&&textarea&& & 这个可以解决吗
UID578057在线时间 小时积分1437帖子离线17215 天注册时间
银牌会员, 积分 1437, 距离下一级还需 1563 积分
这个里面不可以插入图片把 不过html代码就可以 我没有试过&&
那你还不如用 kindeditor
UID672212在线时间 小时积分10帖子离线17215 天注册时间
新手上路, 积分 10, 距离下一级还需 40 积分
这位兄台 问了好几次了&&实在是不好意思&&一直没什么时间 今天整理了下之前的东西&&写了注释的
兼容性不好呢。webpg格式的图片就不行
UID678416在线时间 小时积分8帖子离线17215 天注册时间
新手上路, 积分 8, 距离下一级还需 42 积分
楼主&&你说的那个问题是怎么解决的&&可以说明下吗
Powered by& & & & 最近需要使用到网页后台富文本编辑器。经过同学推荐，最后决定使用百度家的Ueditor.
官方地址：
贴吧地址：
官方提供了网页上非常方便的自定义工具栏的功能。自定义之后直接下载对应的代码包并按照文档部署到项目中即可。其中主要的问题是路径的配置。
首先是将下载好的代码包发布到我们项目的根目录下面。然后在需要添加富文本编辑器的页面头部添加如下代码：
[javascript]&
&script&type="text/javascript"&src="相对该文档的路径/ueditor/ueditor.config.js"&&/script&&&
&script&type="text/javascript"&src="相对该文档的路径/ueditor/ueditor.all.js"&&/script&&&
&script&&&
&span&style="white-space:pre"&&&&/span&window.UEDITOR_HOME_URL&=&"/项目相对网址池绝对路径/ueditor";&&
&/script&&&
配置路径这一块是非常重要的。特别是下面的Ueditor的路径，是相对我们整个代码库的目录的。
配置完成之后，直接在我们网页中的&textarea&标签下面添加ueditor的初始化代码：
[javascript]&
&script&type="text/javascript"&&&
&&&&var&editor&=&new&UE.ui.Editor({initialFrameHeight:100,initialFrameWidth:400&});&&
&&&&&&&&editor.render("actDescribe");&&
&/script&&&
官方的文档并没有给出如何设置ueditor的宽度和高度的说明。这是我在网上网友那里找到的解决方法。在声明编辑器的变量的时候，在参数列表中添加对initialFrameHeight和initialFrameWidth的设置即可。注意，数值后面不需要添加px。
可是，这种方法有时候奏效有时候也不奏效，因为我碰过一种情况就是无论如何调整initialHeight和initialWidth的数值，编辑器的大小都还是不会改变。这个时候，我发现，可以通过调整editor所跟随的textarea的宽高来撑开editor的大小。这也是一种方法，各位同学在官方说明文档出来之前可以两种方法都尝试一下。
当然，好用的文本编辑器还是有很多的，例如kindeditor，之前准备使用这个的，而其文档方面也比较齐全，同时，整个编辑器的size也比较小，对网页的加载速度比较有利。百度的Ueditor还是有点庞大。加载时会有卡顿的速度。估计是我对底层代码的研究不够，多了很多不必要的内容。慢慢研究或许可以使得Ueditor变小。
阅读(...) 评论()}