百度ueditor上传图片时如何设置默认宽高度

百度ueditor上传图片时如何设置默认宽高度

一、总结

一句话总结：直接css或者js里面限制一下就好，可以用html全局限制一下图片的最大高度

直接css或者js里面限制一下就好，可以用html全局限制一下图片的最大高度

 

1、如何改变ueditor.umeditor中插件的大小？

其实也就是改css

或者用js改css

 

2、如何修改所有html,js插件的样式，或者插件里面的插件样式？

css

或者js控制的css

 

3、解决不同浏览器上面的css属性适配问题？

用基础css，或用js

这个也可以用来解决ueditor插入图片的大小，以及各种

用基础属性，用js

在chrome和手机浏览器上面显示不同

 1     function updateGroupDiscussPictureSize(){
 2         $('.pet_sixin_to_r_nr img').each(function () {  3 if(parseInt($(this).css('width'))>100){  4 $(this).css('width','100px');  5  }  6  });  7 $('.pet_sixin_form_r_nr img').each(function () {  8 if(parseInt($(this).css('width'))>100){  9 $(this).css('width','100px'); 10  } 11  }); 12 }

 

 

 

 

二、百度ueditor上传图片时设置默认宽高度 

参考：百度ueditor上传图片时设置默认宽高度 - okokchina的专栏 - CSDN博客
https://blog.csdn.net/okokchina/article/details/46550105

我也是逼了dog了，百度编辑器官方文档其实做的很不详细，都是些基本的用法，想设置个上传图片默认尺寸都找不到相应文档。进过哥的不屑努力，终于是配置好了，其实也是很简单的，加了一行代码。。。。。

 

找到编辑器根目录下面的ueditor.all.js ，一打开吓到哥了，上万行代码，不过不要怕，search 一下 ：cllback() 找到这个函数

 

 

 function callback(){
                    try{
                        var link, json, loader,
                            body = (iframe.contentDocument || iframe.contentWindow.document).body,
                            result = body.innerText || body.textContent || '';
                        json = (new Function("return " + result))();
                        link = me.options.imageUrlPrefix + json.url;
                        if(json.state == 'SUCCESS' && json.url) {
                            loader = me.document.getElementById(loadingId);
                            loader.setAttribute('src', link);
                            loader.setAttribute('_src', link);
                            loader.setAttribute('title', json.title || '');
                            loader.setAttribute('alt', json.original || '');
                            loader.setAttribute('style','max-width:650px');//这里就是哥加入的代码
                            loader.removeAttribute('id');
                            domUtils.removeClasses(loader, 'loadingclass');
                        }

看看注释部分，其实就是给img 上传的图片价格属性就行了！ 你可以任意增加属性，就这么任性。

 

好使，在min.js中配置这个就好了，因为前端页面饮用的是min.js

 

在min.js中可以搜索setAttribute("src"

 

 

 

三、百度UEditor插入图片尺寸自动适应编辑框大小问题

昨天我使用百度UEditor，上传大图变的好大。不能够自动的缩写和编辑框内大小一样，找了半天代码没发现怎么修改，让它上传缩小，在config中 “imageCompressBorder”: 1600, /* 图片压缩 最长边限制 */没什么作用呢。最后还是被我找到了，下面我就来给大家说说如果才能UEditor插入图片尺寸自动适应编辑框大小
首先我们找到如下文件：

\ueditor\themes\iframe.css

从这个文件里，就能看到有这一句：/*可以在这里添加你自己的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;} /*去除点击图片后出现的拉伸边框*/

————————————
把以上横线里面的代码复制到编辑里面 保存 上传覆盖然后清理一下浏览器的缓存都可以使用了。

大家可以修改后的预览：

 

 

四、umeditor编辑器插件图片尺寸太大问题解决

主要看懂UM.commands函数

这个问题的处理办法在编辑器的image插件中其实是有解决方案的，只是被注释掉了。

首先说下在网上找到的两种方法：

1、在\ueditor\themes\iframe.css添加样式 ‘max-width: 100%’，找了下在umeditor中没有这个文件；

2、是在umeditor.js中添加‘width=100%’的属性；

第二种办法是可行的，只是在页面中我引用的是umeditor.min.js文件，要改这里比较麻烦。

不过也正是从这里的ci.width得到启发---编辑器在插件图片时，是会根据图片插件传入的参数设置图片尺寸；

于是，我找到了 image.js文件中，点击确定按钮执行的代码：

这里的list就是传到umeditor.js中的opt参数，也就是待插入图片的相关信息；根据这条线索找到了当前文件中的getAllPic函数：

上图中有一段被注释的代码，它就是调用scale计算图片尺寸的。至于为什么会被注释掉，还不清楚。

打开注释，并在arr.push时添加到width和height属性就可以了，如下：

从上述代码中可以看到，它是通过编辑器的宽度来对图片尺寸进行等比例计算。

 

转载于:https://www.cnblogs.com/Renyi-Fan/p/10253259.html