Ce tutoriel explique comment ajouter un bouton sur l'éditeur pour la police d'icônes Font Awesome. Ce bouton permettra d'afficher et donc d'insérer facilement les icônes Font Awesome dans des messages !
- Voir illustration :
Installation de Font Awesome sur l'éditeur
Ajout dans la feuille de style CSS
Tout d'abord, un code est à ajouter dans la feuille de style CSS afin que le bouton sur l'éditeur et la pop-up s'affiche correctement.
Panneau d'administration Affichage Images et Couleurs - Couleurs (Onglet Feuille de style CSS)
- Code:
/* Ajoute Font Awesome aux polices de la textarea pour que les icônes soient visibles */
.sceditor-container textarea { font-family:Verdana, Arial, Helvetica, sans-serif, FontAwesome !important }
/* Image du bouton */
.sceditor-button-fontawesome div { background:url(http://i19.servimg.com/u/f19/19/06/98/92/fa-f10.png) !important }
/* Popup */
.sceditor-fontawesome {
width:220px;
height:250px;
overflow-y:auto;
}
/* Icônes */
.sceditor-fontawesome i {
color:#333;
font-size:20px;
text-align:center;
cursor:pointer;
padding:3px 0;
width:25%;
}
.sceditor-fontawesome i:hover { color:#666 }
N'oubliez pas de cliquer sur le bouton Valider pour sauvegarder les modifications.
Ajout du code javascript
Panneau d'administration Modules HTML & JAVASCRIPT - Gestion des codes Javascript
Assurez-vous que la gestion des codes Javascript soit activée, puis créez un nouveau javascript ayant pour titre "SCEditor icones FontAwesome" et pour placement "Sur les sujets" (plus d'informations sur la gestion des scripts).
- Code:
$(function(){
if (!$.sceditor) return;
var defaultSize = 18, // taille par défaut des icônes
autoClose = 1, // ferme automatiquement la popup après la sélection d'une icône si activé
// Liste d'icônes
fa = ['', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', ''],
// si la taille est supérieur à 0, on formate une taille par défaut pour les icônes
if (defaultSize) {
A += '[size=' + defaultSize + ']';
O += '[/size]';
}
// crée un bouton sur l'éditeur et une fenêtre de sélection
$.sceditor.command.set('fontawesome', {
dropDown : function(editor, caller, callback) {
var a, b = '', c = document.createElement('DIV'), i = 0, j = fa.length;
for (; i<j; i++) b += '<i class="fa">' + fa[i] + '</i>';
c.innerHTML = b;
for (a = c.getElementsByTagName('I'), i = 0, j = a.length; i<j; i++) {
a[i].onclick = function() {
callback(this.innerHTML);
autoClose && editor.closeDropDown(true);
};
}
editor.createDropDown(caller, 'fontawesome', c);
},
// wysiwyg
exec : function(c) {
var e = this;
$.sceditor.command.get('fontawesome').dropDown(e, c, function(icon) {
e.insert(' [font=FontAwesome]' + A + icon + O + '[/font] ', '', true, true, true);
});
},
// mode source
txtExec : function(c) {
var e = this;
$.sceditor.command.get('fontawesome').dropDown(e, c, function(icon) {
e.insert(' [font=FontAwesome]' + A + icon + O + '[/font] ', '');
});
},
tooltip : 'Font Awesome Icons'
});
toolbar = toolbar.replace(/date,/,'fontawesome,date,'); // ajoute le bouton à la barre d'outils
});
Personnalisation du script
Vous trouverez ci-dessous des explications concernant les éléments modifiables au début du script :
defaultSize : permet de modifier la taille par défaut des icônes. Ici on a indiqué 18, si vous souhaitez que les icônes s'affichent à leur taille d'origine, il suffit de remplacer cette valeur par 0.
autoClose : permet de choisir si la pop-up de sélection se ferme automatiquement après la sélection d'une icône. Cette option est activée par défaut, pour la désactiver, remplacez 1 par 0.
Une fois terminé, sauvegardez le script et rendez-vous sur un sujet. Vous devriez voir l'icône drapeau  dans la barre de l'éditeur. Cliquez et la liste d'icônes s'ouvre : il ne vous reste plus qu'à choisir les icônes à ajouter dans vos messages !
|
Accueil
Créer un forum
Ajouter un bouton Font Awesome sur l'éditeur
par Shadow Ven 24 Avr 2015 - 14:56
dans la barre de l'éditeur. Cliquez et la liste d'icônes s'ouvre : il ne vous reste plus qu'à choisir les icônes à ajouter dans vos messages !
Sujets similaires