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! 
 Pour pouvoir réaliser ce tutoriel, l'installation au préalable de Font Awesome sur son forum est obligatoire!
 Comment installer et utiliser Font Awesome sur son forum
Installation de Font Awesome sur l'éditeur
L'ajout du bouton Font Awesome sur l'éditeur se fait par l'ajout de CSS dans la feuille de style et par la création d'un nouveau javascript.
1. 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 popup s'affiche correctement.
Pour cela, allez dans Panneau d'administration > Affichage > Couleurs > Feuille de style CSS et copiez le code suivant:
- 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 }
2. Ajout du code javascript
Ensuite, il ne reste plus qu'à installer le bouton dans l'éditeur du forum.
Rendez-vous dans Panneau d'administration > Modules > Gestion des codes Javascript, assurez-vous que la gestion des codes soit bien activée et créez un nouveau script.
Titre: SCEditor icones FontAwesome
Placement: Sur toutes les pages
- 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 = ['','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','','',''],
A = '', O = A;
// 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
});
Modifications: 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 popup 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 le Ven 24 Avr 2015 - 14:56
