ホームページ  >  記事  >  ウェブフロントエンド  >  Ueditor を使用して画像をアップロードした後のスタイル クラス名のカスタマイズの概要

Ueditor を使用して画像をアップロードした後のスタイル クラス名のカスタマイズの概要

高洛峰
高洛峰オリジナル
2017-03-15 11:39:021613ブラウズ

Ueditor は、Baidu のリッチ テキスト プラグインです。ユーザーがフロントエンド言語を知っている場合、特に現在のモバイル面での応用性は非常に優れています。しかし、多くの場合、ユーザーはプログラミングを理解していないため、フロントエンド言語を使用させることは不可能であり、開発中にスタイル全体を定義する必要があります。

通常の状況では、アップロード後の画像の幅と高さは固定されています。モバイル端末に適用したい場合は、幅を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') || '') + '" >');//オンラインではカスタム スタイルを追加できると言われていますここで私はそれを試しました。 ' + 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.

set

Style(loader, 'width ', '100%');//

controlstyleを設定します style#24527...

domUtils.addClass(loader, 'カスタムスタイルクラス名');/ /これは組み込みメソッドであり、 #24534 を実装できます

...}

...

})

...

})

...

}

...

})

スタイルを設定するときは、usditor.config.js

(function(){

...

window.UEDITOR_CONFIG = {

...

// xss フィルター ホワイトリスト ソース: http://www.php.cn/

,whitList: {

...

img: ['src', 'alt ' , 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex', 'style'],//フィルターホワイトリストスタイルを追加 #403

...

}

...

}

...

})

以上がUeditor を使用して画像をアップロードした後のスタイル クラス名のカスタマイズの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。