Heim > Artikel > Web-Frontend > 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
- 高洛峰Original
- 2017-03-15 11:39:021613Durchsuche
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:
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', '
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!