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
...
}
...
}
...
})


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM