<tr id="ublig"><code id="ublig"><delect id="ublig"></delect></code></tr>
  • <noframes id="ublig"></noframes>
    1. <output id="ublig"></output>

    2. <mark id="ublig"><rp id="ublig"></rp></mark>

      <sup id="ublig"></sup>

      百度編輯器上傳圖片時設置圖片展示的最大寬度

      發布日期:2021年04月13日 瀏覽次數:11383

      做開發的技術都經常用到在線編輯器,百度在線編輯器是我們國內用的最多的一款編輯器了吧。平時在上傳圖片的時候,有沒有發現圖片在編輯器內顯示的寬度太大而影響排版體驗??

      這邊文章我們就來解決這個問題》


      在百度編輯器中上傳圖片有兩種方式,單圖上傳和多圖上傳,而單圖上傳又分為點擊按鈕選擇文件上傳和拖拽文件到編輯區域上實現自動上傳,這里我來分別實現在單圖上傳和多圖上傳上實現設置上傳圖片的最大寬度


      一:單圖上傳

      單圖上傳的實現分別為單擊按鈕選擇文件上傳和拖拽文件到編輯區域實現上傳兩種方式

      1:點擊按鈕選擇文件實現上傳

      在百度編輯器源碼的ueditor.all.js文件中的如下方法是實現點擊按鈕選擇文件實現上傳的js方法

      UE.plugin.register('simpleupload', function ()

      在上面的方法中找到如下設置img屬性的方法

      loader.setAttribute

      然后加上

          //設置上傳圖片的最大寬度的設置
          loader.setAttribute('style','max-width:600px');

      image.png


      這時候我們在點擊按鈕單圖上傳圖片時圖片的img標簽上就會加上style='max-width:600px'的屬性了,這樣就實現了設置圖片的最大寬度


      2:拖拽文件實現自動上傳

      在百度編輯器源碼的ueditor.all.js文件中的如下方法是實現拖拽文件實現自動上傳的js方法

      UE.plugin.register('autoupload', function ()

      在上面的方法中找到如下設置img屬性的方法

      loader.setAttribute

      然后加上

          //設置上傳圖片的最大寬度的設置
          loader.setAttribute('style','max-width:600px');

      image.png


      這時候我們在拖拽文件實現自動上傳時圖片的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修改的方式進行對應修改即可

      需要注意的是:如果你引入的js文件是mini版本的話估計文件名有變化。




      延伸閱讀

      微信小程序各種圖表繪制

      在做應用系統開發的時候,我們經常需要繪制各種統計圖表。如何做呢?這篇文章給你一個思路參考。

      初識 客戶端js DDOS攻防

      我們將從"攻"和"防"兩方面與您一同梳理JavaScript DDoS: 攻擊:攻擊者如何通過惡意地址、服務器劫持、中間人等手段來實施DDoS攻擊。 防御:網站如何使用HTTPS和SRI(Subresource Integrity)等手段來避免攻擊。

      百度編輯器上傳圖片時設置圖片展示的最大寬度

      百度編輯器上傳圖片能自動裁切圖片大小嗎? 這個我暫時不知道,不過作為應急辦法,可以暫時先設置圖片的最大寬度。如果哪位網友知道如何通過百度編輯器自動裁切壓縮圖片大小請告知,不勝感激。

      跨域資源共享 CORS 詳解

      CORS需要瀏覽器和服務器同時支持。目前,所有瀏覽器都支持該功能,IE瀏覽器不能低于IE10。 整個CORS通信過程,都是瀏覽器自動完成,不需要用戶參與。對于開發者來說,CORS通信與同源的AJAX通信沒有差別,代碼完全一樣。

      mysql 字符串截取

      數據庫開發過程中常用的字符串截取操作。

      dragsort:支持拖動排序js前端組建

      前端js拖拽排序組建, 看起來不錯. 收藏了.

      css選中子元素中不是第一個元素的3種方法

      前端開發中經常需要設置非第一個元素之外的樣式,這篇文章做一個總結. 需要的小伙伴歡迎查閱和分享.

      純 CSS 實現繪制各種三角形(各種角度)

      用CSS繪制三角形,這在前端開發過程中是比較常見的. 以前都是使用圖片代替, 當你看到這篇文章之后,也許以后遇到類似需求,就告別PS了.

      面向個體戶與個人的賬目小程序上線

      重點推薦給個體戶,個人家庭,個人合租用戶,臨時項目辦事等使用.用完即走,不轉內存, 可以多人合作記賬. AA記賬自動分賬. 單獨設置每個用戶的權限等非常實用的功能,大家合租的記賬隨時知道,統計功能也很強大,最重要是用起來很簡單,沒其他記賬產品那么復雜。

      廣西空中課堂在小程序發布視頻點播課

      覆蓋小學、初中、高中的12個年級的廣西中小學生“空中課堂”線上課程正式推出,而課堂小編輯選擇本公司小程序平臺發布,方便家中無法收視電視的同學方便使用手機端點播學習。
      亚洲综合憿情五月丁香五月网