我們公司製作常用的網站使用的是我們自己的cms，今天產品提了一個需求，希望在編輯器中上傳圖片時圖片的最大寬度不要超過600px，在百度編輯器中上傳圖片有兩種方式，單圖上傳和多圖上傳，而單圖上傳又分爲點擊按鈕選擇文件上傳和拖拽文件到編輯區域上實現自動上傳，這裏我來分別實現在單圖上傳和多圖上傳上實現設置上傳圖片的最大寬度
一：單圖上傳
單圖上傳的實現分別爲單擊按鈕選擇文件上傳和拖拽文件到編輯區域實現上傳兩種方式
1：點擊按鈕選擇文件實現上傳
在百度編輯器源碼的ueditor.all.js文件中的如下方法是實現點擊按鈕選擇文件實現上傳的js方法
UE.plugin.register('simpleupload', function ()
在上面的方法中找到如下設置img屬性的方法
loader.setAttribute
然後加上
//設置上傳圖片的最大寬度的設置
loader.setAttribute('style','max-width:600px');
這時候我們在點擊按鈕單圖上傳圖片時圖片的img標籤上就會加上style='max-width:600px'的屬性了，這樣就實現了設置圖片的最大寬度
2：拖拽文件實現自動上傳
在百度編輯器源碼的ueditor.all.js文件中的如下方法是實現拖拽文件實現自動上傳的js方法
UE.plugin.register('autoupload', function ()
在上面的方法中找到如下設置img屬性的方法
loader.setAttribute
然後加上
//設置上傳圖片的最大寬度的設置
loader.setAttribute('style','max-width:600px');
這時候我們在拖拽文件實現自動上傳時圖片的img標籤上就會加上style='max-width:600px'的屬性了，這樣就實現了設置圖片的最大寬度
二：多圖上傳
在ueditor.all.js文件中的如下方法是實現多圖上傳的js方法
UE.commands['insertimage']
在上面的方法中找到<img src，在這裏我們可以找到兩個，這個分別是多圖上傳時選擇一張圖片和選擇多張圖片的img標籤屬性設置
1：在opt.length == 1 的判斷爲true中是隻選擇一張圖片的img標籤屬性設置，這裏設置img的最大寬度的具體實現如下
(1)：刪除如下代碼
(ci.width ? 'width="' + ci.width + '" ' : '') +
(2)：將如下代碼
(ci['floatStyle'] == 'left' || ci['floatStyle'] == 'right' ? ' style="float:' + ci['floatStyle'] + ';"' : '') +
改爲：
(ci['floatStyle'] == 'left' || ci['floatStyle'] == 'right' ? ' style="max-width:600px;float:' + ci['floatStyle'] + ';"' : 'style="max-width:600px;"') +
這樣我們在多圖上傳時選擇一張圖片上傳時時圖片的img標籤上就會加上style='max-width:600px'的屬性了，這樣就實現了設置圖片的最大寬度
2：在opt.length == 1 的判斷爲false中是選擇多張圖片的img標籤屬性設置，這裏設置img的最大寬度的具體實現如下
(1)：刪除如下代碼
(ci.width ? 'width="' + ci.width + '" ' : '') +
(2)：將如下代碼
' style="' + (ci['floatStyle'] && ci['floatStyle'] != 'center' ? 'float:' + ci['floatStyle'] + ';' : '') +
改爲
' style="max-width:600px;' + (ci['floatStyle'] && ci['floatStyle'] != 'center' ? 'float:' + ci['floatStyle'] + ';' : '') +
這樣我們在多圖上傳時選擇多張圖片上傳時時圖片的img標籤上就會加上style='max-width:600px'的屬性了，這樣就實現了設置圖片的最大寬度
總結：
根據如上的步驟我們就可以實現在上傳圖片時這是圖片的最大寬度了，如果你在使用百度編輯器的時候引入的時ueditor.all.min.js的話，只需要在按照ueditor.all.js修改的方式進行對應修改即可