百度ueditor上傳圖片時如何設(shè)置默認(rèn)寬高度

一、總結(jié)

一句話總結(jié)：直接css或者js里面限制一下就好，可以用html全局限制一下圖片的最大高度

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

?

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

其實也就是改css

或者用js改css

?

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

css

或者js控制的css

?

3、解決不同瀏覽器上面的css屬性適配問題？

用基礎(chǔ)css，或用js

這個也可以用來解決ueditor插入圖片的大小，以及各種

用基礎(chǔ)屬性，用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上傳圖片時設(shè)置默認(rèn)寬高度?

參考：百度ueditor上傳圖片時設(shè)置默認(rèn)寬高度 - okokchina的專欄 - CSDN博客
https://blog.csdn.net/okokchina/article/details/46550105

我也是逼了dog了，百度編輯器官方文檔其實做的很不詳細(xì)，都是些基本的用法，想設(shè)置個上傳圖片默認(rèn)尺寸都找不到相應(yīng)文檔。進(jìn)過哥的不屑努力，終于是配置好了，其實也是很簡單的，加了一行代碼。。。。。

?

找到編輯器根目錄下面的ueditor.all.js ，一打開嚇到哥了，上萬行代碼，不過不要怕，search 一下 ：cllback() 找到這個函數(shù)

?

?

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插入圖片尺寸自動適應(yīng)編輯框大小問題

昨天我使用百度UEditor，上傳大圖變的好大。不能夠自動的縮寫和編輯框內(nèi)大小一樣，找了半天代碼沒發(fā)現(xiàn)怎么修改，讓它上傳縮小，在config中 “imageCompressBorder”: 1600, /* 圖片壓縮 最長邊限制 */沒什么作用呢。最后還是被我找到了，下面我就來給大家說說如果才能UEditor插入圖片尺寸自動適應(yīng)編輯框大小
首先我們找到如下文件：

\ueditor\themes\iframe.css

從這個文件里，就能看到有這一句：/*可以在這里添加你自己的css*/

哈哈，接下來，我們寫css吧：

———————————-

img {
max-width: 100%; /*圖片自適應(yīng)寬度*/
}
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;} /*去除點擊圖片后出現(xiàn)的拉伸邊框*/

————————————
把以上橫線里面的代碼復(fù)制到編輯里面 保存 上傳覆蓋然后清理一下瀏覽器的緩存都可以使用了。

大家可以修改后的預(yù)覽：

?

?

四、umeditor編輯器插件圖片尺寸太大問題解決

主要看懂UM.commands函數(shù)

這個問題的處理辦法在編輯器的image插件中其實是有解決方案的，只是被注釋掉了。

首先說下在網(wǎng)上找到的兩種方法：

1、在\ueditor\themes\iframe.css添加樣式 ‘max-width: 100%’，找了下在umeditor中沒有這個文件；

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

第二種辦法是可行的，只是在頁面中我引用的是umeditor.min.js文件，要改這里比較麻煩。

不過也正是從這里的ci.width得到啟發(fā)---編輯器在插件圖片時，是會根據(jù)圖片插件傳入的參數(shù)設(shè)置圖片尺寸；

于是，我找到了 image.js文件中，點擊確定按鈕執(zhí)行的代碼：

這里的list就是傳到umeditor.js中的opt參數(shù)，也就是待插入圖片的相關(guān)信息；根據(jù)這條線索找到了當(dāng)前文件中的getAllPic函數(shù)：

上圖中有一段被注釋的代碼，它就是調(diào)用scale計算圖片尺寸的。至于為什么會被注釋掉，還不清楚。

打開注釋，并在arr.push時添加到width和height屬性就可以了，如下：

從上述代碼中可以看到，它是通過編輯器的寬度來對圖片尺寸進(jìn)行等比例計算。

轉(zhuǎn)載于:https://www.cnblogs.com/Renyi-Fan/p/10253259.html

總結(jié)

以上是生活随笔為你收集整理的百度ueditor上传图片时如何设置默认宽高度的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。