Ueditor上傳圖片後自定義樣式類名

Ueditor是百度的一個富文本插件，若是使用者會前端語言的話，那適用性就很好，特別是如今移動端縱橫的狀況。但每每使用者並不懂編程，要讓他們使用前端語言的話是不可能的，這就須要咱們在開發時就定義好整個樣式。

正常狀況下，咱們上傳後的圖片是固定了寬高的，要想適用移動端，就必須使寬度定義爲100%，或者加個類上去，咱們能夠自定義。這就是咱們的思路。

下面是修改代碼：

ueditor.all.js

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

...

function initUploadBtn(){

...

domUtils.on(btnIframe, 'load', function(){

...

domUtils.on(input, 'change', function(){

...

me.execCommand('inserthtml', '<img class="loadingclass" id="' + loadingId + '" src="' + me.options.themePath + me.options.theme +'/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" >');//網上說法這裏能夠加自定義樣式,試過會報錯ueditor.all.js :  #24461  行

me.execCommand('inserthtml', '<img class="loadingclass" id="' + loadingId + '" src="' + me.options.themePath + me.options.theme +'/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') +  width="291" height="164"+'"style="width: 291px; height: 164px;">');

function callback(){

...

　　　　　　　　domUtils.setStyle(loader, 'width', '100%');//設置控件樣式style#24527

...

domUtils.addClass(loader, '自定義樣式類名');//是自帶方法,能夠實現#24534

...

}

...

})

...

})

...

}

...

})

設置style時,要同時修改usditor.config.js

(function(){

...

window.UEDITOR_CONFIG = {

...

// xss過濾白名單 名單來源: https://raw.githubusercontent.com/leizongmin/js-xss/master/lib/default.js

,whitList: {

...

img: ['src', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex' , 'style'],//添加過濾白名單style#403

...

}

...

}

...

})