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!
|