首頁 > web前端 > html教學 > 使用Ueditor上傳圖片後自訂樣式類別名稱介紹

使用Ueditor上傳圖片後自訂樣式類別名稱介紹

高洛峰
發布: 2017-03-15 11:39:02
原創
1710 人瀏覽過

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', 'class" id="' + loadingId + '" src="' + me.options. themePath + me.options.theme +'/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" >' );//網路說法這裡可以加上自訂樣式,試過會報錯ueditor.all.js :  #24461  行

me.execCommand('inserthtml', 'width="291" height="164"+'"style="width: 291px; height: 164px;##"> ');

function callback(){

#...

##        domUtils.set Style(loader, 'width', '100%');//設定控制項樣式style#24527##...

domUtils .addClass(loader, '自訂樣式類別名稱');//是自帶方法,可以實作#24534

...

#}

...

})

...

})

...

}

...

})

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

(function(){

...

window.UEDITOR_CONFIG = {

...

// xss過濾白名單名單來源: //m.sbmmt.com/

,whitList: {

...

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

...

#}

...

##}

...

})

以上是使用Ueditor上傳圖片後自訂樣式類別名稱介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板