Introduction à la personnalisation des noms de classes de style après le téléchargement d'images à l'aide d'Ueditor

Ueditor est un plug-in de texte enrichi de Baidu Si l'utilisateur connaît le langage front-end, l'applicabilité est très bonne, en particulier dans la situation mobile verticale et horizontale actuelle. Mais souvent les utilisateurs ne comprennent pas la programmation, et il est impossible de les laisser utiliser des langages front-end. Cela nous oblige à définir tout le style lors du développement.

Dans des circonstances normales, la largeur et la hauteur de l'image que nous téléchargées sont fixes. Pour être adaptée aux appareils mobiles, la largeur doit être définie à 100 %, ou Ajoutez une classe et nous pouvons la personnaliser. C'est notre réflexion.

Ce qui suit est le code modifié :

ueditor.all.js

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

...

function initUploadBtn(){

...

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

...

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

.. .

me.execCommand('inserthtml', 'class" id="'loadingId '" src="' me.options.themePath moi.options.theme '/images/spacer.gif" title="' (me.getLang('simpleupload.loading') || '') '" >');//En ligne déclaration ici Vous pouvez ajouter des styles personnalisés, mais si vous l'essayez, vous obtiendrez une erreur ueditor.all.js : #24461 Ligne

me.execCommand('inserthtml', '< ;img class="loadingclass" id= "'loadingId '" src="' me.options.themePath me.options.theme '/images/spacer.gif" title="' (me.getLang('simpleupload.loading' ) || '') largeur="291" hauteur="164" '"style="largeur : 291px; hauteur : 164px;">');

function callback(){

...

　　　domUtils.setStyle(loader, 'width ', '100%');/ /Définir contrôle style style#24527

...

domUtils.addClass(loader, ' nom de classe de style personnalisé');/ / est une méthode intégrée, qui peut être implémentée #24534

...

}

...

})

...

})

...

}

...

})

Lors de la définition du style, vous devez également modifier usditor.config.js

(function(){

...

window.UEDITOR_CONFIG = {

...

// liste blanche des filtres xss Source de la liste : //m.sbmmt.com/

,whitListe : {

...

img : ['src ', 'alt', 'title', 'width', 'height', 'id', '_src', 'loadingclass', 'class', 'data-latex', 'style'],//Ajouter un style de liste blanche de filtre#403

...

}

...

}

...

})

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!