Ajouter un bouton Font Awesome sur l'éditeur

Voir le sujet précédent Voir le sujet suivant Aller en bas

  • 0

Tutoriel Ajouter un bouton Font Awesome sur l'éditeur

Message par Shadow le Ven 24 Avr 2015 - 14:56

Ajouter un bouton Font Awesome sur l'éditeur


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



Warning Pour pouvoir réaliser ce tutoriel, l'installation au préalable de Font Awesome sur son forum est obligatoire! Warning

Tuto 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('&nbsp;[font=FontAwesome]' + A + icon + O + '[/font]&nbsp;', '', 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! Cool



Règles Générales du Forum - Le Staff de ForumActif
Questions & Réponses Fréquentes - Trucs & Astuces
Outils Fondateurs - Perte de Mot de Passe

Shadow
Adminactive
Adminactive

Féminin
Messages : 23775
Inscrit(e) le : 30/03/2007

http://forum.forumactif.com
Shadow a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum