Heim > Web-Frontend > HTML-Tutorial > Einführung in das Anpassen von Stilklassennamen nach dem Hochladen von Bildern mit Ueditor

Einführung in das Anpassen von Stilklassennamen nach dem Hochladen von Bildern mit Ueditor

高洛峰
Freigeben: 2017-03-15 11:39:02
Original
1687 Leute haben es durchsucht

Ueditor ist ein Rich-Text-Plug-in von Baidu. Wenn der Benutzer die Front-End-Sprache kennt, ist die Anwendbarkeit sehr gut, insbesondere in der aktuellen mobilen vertikalen und horizontalen Situation. Aber oft verstehen Benutzer die Programmierung nicht und es ist unmöglich, ihnen die Verwendung von Frontend-Sprachen zu ermöglichen. Dies erfordert, dass wir den gesamten Stil während der Entwicklung definieren.

Unter normalen Umständen sind die Breite und Höhe des Bildes, das wir hochladen, fest vorgegeben. Um für mobile Geräte geeignet zu sein, muss die Breite auf 100 % festgelegt werden. oder Fügen Sie eine Klasse hinzu und wir können sie anpassen. Das ist unser Denken.

Das Folgende ist der geänderte Code:

ueditor.all.js

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

...

function initUploadBtn(){

...

domUtils.on(btnIf rame, 'load', function(){

...

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

.. .

me.execCommand('inserthtml', 'class" id="' + LoadingId + '" src="' + me. Optionen. themePath + me.options.theme +'/images/spacer.gif" title="' + (me.getLang('simpleupload.loading') || '') + '" > ;' );//Es heißt im Internet, dass man hier benutzerdefinierte Stile hinzufügen kann. Wenn Sie es versuchen, erhalten Sie eine Fehlermeldung ueditor.all.js: #24461 Zeile

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

Funktionsrückruf(){

...

domUtils.set Style(loader, 'width', '100%');//Legen Sie das Steuerelement Stil style#24527

...

domUtils .addClass(loader, 'custom style class name');//Es ist eine integrierte Methode, die implementiert werden kann #24534

...

}

...

})

...

})

...

}

...

})

Beim Festlegen des Stils müssen Sie auch usditor.config.js ändern

(function(){

...

window.UEDITOR_CONFIG = {

...

// XSS-Filter-Whitelist Listenquelle: http://www.php.cn/

,whitListe: {

...

img: ['src ', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex', 'style'],//Filter-Whitelist-Stil Nr. 403 hinzufügen

...

}

...

}

...

})

Das obige ist der detaillierte Inhalt vonEinführung in das Anpassen von Stilklassennamen nach dem Hochladen von Bildern mit Ueditor. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage