Partagez | 
 

 Ajouter des balises BBcodes à vos forums

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

Miettes

Doyenne

Bons Points (BP) : 174
MessageSujet: Ajouter des balises BBcodes à vos forums   Sam 21 Sep - 11:10

L'ajout d'une balise ? C'est possible !


Dans ce tutoriel, nous allons apprendre à créer de nouvelles balises bbcode à intégrer à nos pages web (car oui, ce code peut aussi bien s'appliquer sur notre forum xooit/FA que sur nos sites Smile ).

Comme vous commencez à le savoir si vous avez l'habitude de lire mes tutos, nous allons tout détailler ensemble car, pour moi, il est important de comprendre plutôt que de recopier bêtement un code.

Accrochez-vous ! C'est parti !

Exemple


Avant de nous plonger dans le code, mettons-nous en tête un exemple précis de ce que nous allons faire Smile
Spoiler:
 

La préparation


Pour bien commencer, nous allons définir précisément ce que nous aimerions avoir. Ici, j'ai donc 2 codes différents :
-> le code pour la balise "MJ"
-> le code pour la balise "Les règles"

Je commence donc par préparer mon code html
Code:
<div class="sl_mj"><h1><span class="warning">/!\</span><span>Intervention Maitre du Jeu</span><span class="warning">/!\</span></h1>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in hendrerit tellus. Sed mollis diam tortor, in commodo leo ultrices id. Donec vitae augue eu velit vulputate cursus. Donec volutpat libero vehicula, ultricies mi sit amet, tempus turpis. Aliquam neque felis, aliquam eu magna et, pretium consequat est. Suspendisse placerat eleifend sagittis. Vestibulum et dui nisl. Nam eget ullamcorper leo. Proin commodo leo a laoreet commodo.</div>

<div class="rules"><fieldset class="mep_olympiades"><legend>Règles</legend>
Duis sed turpis sit amet elit molestie molestie sed varius diam. Mauris commodo justo at dolor vestibulum rutrum. Maecenas scelerisque ac mauris et molestie. Pellentesque posuere augue nec iaculis fringilla. Nam elementum odio metus, vel pretium nunc dignissim non. Phasellus metus lorem, euismod eget pulvinar non, aliquet sed velit. Curabitur eu molestie odio, nec pharetra ante.
</fieldset></div>
et ma css pour ces 2 codes
Code:
/** Balise MJ **/
.sl_mj{text-align:justify;font-style:italic;}
.sl_mj h1{text-align:center;font-weight:bold;font-family:Georgia;font-size:14px;}
.sl_mj .warning{color:#ff0000;font-size:14px;}
.sl_mj span{text-decoration:underline;}

/** Balise règles **/
fieldset.mep_olympiades{padding:12px;   margin:auto;width:600px;font-family: Times New Roman;font-size:12pt;border:double #38170c 4px;background-image:url('http://school-of-pub.fr/imgEte2013/bg.png');color:#4f3b14;}
fieldset.mep_olympiades legend{text-align:right;font-size:10pt;font-style:italic;padding:4px;color:#38170c;background:#f7eae1 url('http://school-of-pub.fr/imgEte2013/bg.png') repeat;border:double #38170c 4px;}
Figurez-vous que rien qu'avec ça, la moitié du travail est faite ^^

On passe à la suite !

La CSS


Là, c'est facile, il suffit de reprendre ce qu'on a fait plus haut et de le copier/coller
-> soit dans la feuille de style CSS (si c'est sous FA ou sur votre site)
-> soit entre les balises style du template "overall_header" si votre forum est sous xooit

Du javascript, rien que du javascript


On attaque à présent la partie la plus complexe et celle qui vous fait vous arracher les cheveux : le js. Allons-y tout en douceur et essayons de comprendre ce que l'on fait Smile

Avant toute chose, on veut que ce code agisse une fois que notre page est prête, c'est à dire charger. Cela signifie donc que l'on va mettre tout notre script dans :
Code:
jQuery(document).ready(function()  {

/* Votre code JS sera ici */

});
Idea Pour rappel, en JS on écrit les commentaires de cette façon :
Code:
/* Commentaires */
Maintenant, à l'attaque ! Tout d'abord, on va récupérer toutes les div de notre page
Code:
var divs = document.getElementsByTagName('div');
ensuite, pour chaque div
Code:
for (i=0; i<divs.length; i++){
   /*le code sera ici */
}
on va faire un petit test. Si la div à la class "postbody" (= la classe qui contient mon message)
Code:
if(divs[i] != null && divs[i].className == 'postbody'){ 
   /*le code sera ici */
}
Alors on va définir les balises ^^

~~» Comment définir chaque nouveau BBcode
On commence par définir une chaine de caractère qui commence par notre balise (dans mon exemple "[ MJ]")
Code:
MJ = new String('[\[]MJ[^[]');
MJ_deb = new RegExp(MJ, 'g');
et qui se termine par notre balise (dans mon exemple "[ /MJ]")
Code:
 MJ_fin = new RegExp('[\[]/MJ[^[]', 'g');
Au final, chaque nouvelle balise est déclarée de cette façon :
Code:
/* Déclaration balise MJ */
MJ = new String('[\[]MJ[^[]');
MJ_deb = new RegExp(MJ, 'g');
MJ_fin = new RegExp('[\[]/MJ[^[]', 'g');

/* Déclaration balise Rules */
rules = new String('[\[]rules[^[]');
rules_deb = new RegExp(rules, 'g');
rules_fin = new RegExp('[\[]/rules[^[]', 'g');
~~» Comment remplacer le BBcode par le style désiré
On commence par récupérer le contenu du message (donc de notre div "postbody")
Code:
contenu = divs[i].innerHTML;
dans ce contenu, on va repérer nos balises et on va les remplacer par le html que nous avons défini précédent. Du coup, [ MJ] est remplacé par
Code:
<div class="sl_mj"><h1><span class="warning">/!\</span> <span>Intervention Maitre du Jeu</span> <span class="warning">/!\</span></h1>
ce qui nous donne en js
Code:
.replace(MJ_deb,'<div class="sl_mj"><h1><span class="warning">/!\</span> <span>Intervention Maitre du Jeu</span> <span class="warning">/!\</span></h1>')
et [/MJ] est remplacé par
Code:
</div>
ce qui nous donne en js
Code:
.replace(MJ_fin,'</div>')
On combine ensuite ces 2 fonctions
Code:
.replace(MJ_deb,'<div class="sl_mj"><h1><span class="warning">/!\</span> <span>Intervention Maitre du Jeu</span> <span class="warning">/!\</span></h1>').replace(MJ_fin,'</div>');
et on les applique sur la variable "contenu" que nous avons récupéré un peu plus haut, ce qui nous donne :
Code:
nouveaucontenu = contenu.replace(MJ_deb,'<div class="sl_mj"><h1><span class="warning">/!\</span> <span>Intervention Maitre du Jeu</span> <span class="warning">/!\</span></h1>').replace(MJ_fin,'</div>');
Idea Si vous avez plusieurs balises, il faut ajouter les "replace" les uns à la suite des autres, par exemple :
Code:
nouveaucontenu = contenu.replace(MJ_deb,'<div class="sl_mj"><h4><span class="warning">/!\</span> <span>Intervention Maitre du Jeu</span> <span class="warning">/!\</span></h4>').replace(MJ_fin,'</div>').replace(rules_deb,'<div class="rules"><fieldset class="mep_olympiades"><legend>Règles</legend>').replace(rules_fin,'</fieldset></div>');
et pour finir, si le code n'existe pas déjà dans le message (à comprendre, si quelqu'un n'a pas oublié le BBcode pour entrer directement le code html), dans ce cas, on applique les modifs
Code:
if(contenu != nouveaucontenu){
    divs[i].innerHTML = nouveaucontenu;
}
Au final, le code pour interpréter les balises ressemble à ça
Code:
/* Remplacement balise */
         contenu = divs[i].innerHTML;
         
         nouveaucontenu = contenu.replace(MJ_deb,'<div class="sl_mj"><h4><span class="warning">/!\</span> <span>Intervention Maitre du Jeu</span> <span class="warning">/!\</span></h4>').replace(MJ_fin,'</div>').replace(rules_deb,'<div class="rules"><fieldset class="mep_olympiades"><legend>Règles</legend>').replace(rules_fin,'</fieldset></div>');
      
         if(contenu != nouveaucontenu){
            divs[i].innerHTML = nouveaucontenu;
         }         
~~» Comment faire en sorte que le js ne soit pas interprété dans les balises "code"
Si on s'arrête là, nos nouvelles balises sont interprétées partout. Or, il est nécessaire que dans les balises "code", celles-ci ne soient pas transformées. Nous allons donc voir ensemble comment faire.
IdeaCe code est à placer avant le code "Comment remplacer le BBcode par le style désiré"
Tout comme précédemment, on va commencer par récupérer toutes les div, les parcourir et tester si elles ont pour nom de class "cont_code" qui correspond aux balises "code"
Code:
/* Pas d'interprétation dans balise code */
   var divsCode = divs[i].getElementsByTagName('div');
   for (n=0; n<divsCode.length; n++){   
      if(divsCode[n] != null && divsCode[n].className == 'cont_code'){ 
         /* le code sera ici */   
      }
   }
Ensuite, on récupére le contenu de cette div "code"
Code:
contenuCode = divsCode[n].innerHTML;
Et comme précédement, on va faire du remplacement. Cette fois, on va remplacer chaque [ par le code html correspondant &#91; et chaque ] par le code html correspond &#93; mais en utilisant une petite astuce ^^ En effet, si on met exactement ce code, celui-ci sera transformer en crocher. Nous allons donc :
-> mettre le code html du & &amp;
-> ajouter à la suite de celui-ci le reste du code "crochet".
De cette façon, le navigateur ne transformera pas notre code en crochet, mais, lorsque l'utilisateur fera un copié/collé, il récupérera bien un crochet.

Concernant le replace, nous aurons donc pour [ MJ]
Code:
replace(MJ_deb,'& amp;#91;MJ& amp;#93;').replace(MJ_fin,'& amp;#91;/MJ& amp;#93;')
que l'on applique sur la variable contenuCode, ce qui nous donne :
Code:
nouveaucontenuCode = contenuCode.replace(MJ_deb,'& amp;#91;MJ& amp;#93;').replace(MJ_fin,'& amp;#91;/MJ& amp;#93;');
et si l'on a plusieurs balises :
Code:
nouveaucontenuCode = contenuCode.replace(MJ_deb,'&#91;MJ&#93;').replace(MJ_fin,'&#91;/MJ&#93;').replace(rules_deb,'& amp;#91;rules& amp;#93;').replace(rules_fin,'& amp;#91;/rules& amp;#93;');
et pour finir, si le code n'existe pas déjà dans le message (à comprendre, si quelqu'un n'a pas oublié le BBcode pour entrer directement le code html), dans ce cas, on applique les modifs
Code:
divsCode[n].innerHTML = nouveaucontenuCode;

Ce qui nous donne pour le "non remplacement des balises", le code js suivant
Code:
/* Pas d'interprétation dans balise code */
         var divsCode = divs[i].getElementsByTagName('div');
         for (n=0; n<divsCode.length; n++){   
            if(divsCode[n] != null && divsCode[n].className == 'cont_code'){ 
               contenuCode = divsCode[n].innerHTML;   
               
               nouveaucontenuCode = contenuCode.replace(MJ_deb,'& amp;#91;MJ& amp;#93;').replace(MJ_fin,'& amp;#91;/MJ& amp;#93;').replace(rules_deb,'& amp;#91;rules& amp;#93;').replace(rules_fin,'& amp;#91;/rules& amp;#93;');
            
               divsCode[n].innerHTML = nouveaucontenuCode;      
            }
         }

Exclamation ne pas mettre d'espace entre & et amp;

~~» Le JS complet
Au final, on a ce js pour la balise MJ
Code:

jQuery(document).ready(function()  {
   
   var divs = document.getElementsByTagName('div');
   for (i=0; i<divs.length; i++){   
      /* Remplaçement balises */
      if(divs[i] != null && divs[i].className == 'contenuMsg'){ 

         /* Déclaration balise MJ */
         MJ = new String('[\[]MJ[^[]');
         MJ_deb = new RegExp(MJ, 'g');
         MJ_fin = new RegExp('[\[]/MJ[^[]', 'g');
         
         /* Déclaration balise Rules */
         rules = new String('[\[]rules[^[]');
         rules_deb = new RegExp(rules, 'g');
         rules_fin = new RegExp('[\[]/rules[^[]', 'g');
               
         /* Pas d'interprétation dans balise code */
         var divsCode = divs[i].getElementsByTagName('div');
         for (n=0; n<divsCode.length; n++){   
            if(divsCode[n] != null && divsCode[n].className == 'cont_code'){ 
               contenuCode = divsCode[n].innerHTML;   
               
               nouveaucontenuCode = contenuCode.replace(MJ_deb,'& amp;#91;MJ& amp;#93;').replace(MJ_fin,'& amp;#91;/MJ& amp;#93;').replace(rules_deb,'& amp;#91;rules& amp;#93;').replace(rules_fin,'& amp;#91;/rules& amp;#93;');
            
               divsCode[n].innerHTML = nouveaucontenuCode;      
            }
         }
         
         /* Remplacement balise */
         contenu = divs[i].innerHTML;
         
         nouveaucontenu = contenu.replace(MJ_deb,'<div class="sl_mj"><h4><span class="warning">/!\</span> <span>Intervention Maitre du Jeu</span> <span class="warning">/!\</span></h4>').replace(MJ_fin,'</div>').replace(rules_deb,'<div class="rules"><fieldset class="mep_olympiades"><legend>Règles</legend>').replace(rules_fin,'</fieldset></div>');
      
         if(contenu != nouveaucontenu){
            divs[i].innerHTML = nouveaucontenu;
         }         
      }
   }
   
   
});
Exclamation ne pas mettre d'espace entre & et amp;

Idea Attention ! Si les messages de vos forums sont dans une autre div que la "postbody", n'oubliez pas de modifier cette balise. Par exemple, si vos messages sont codés de cette façon
Code:
<div class="contenuMsg">
   {postrow.displayed.MESSAGE}
</div>
dans le js, il faut donc remplacer ceci
Code:
if(divs[i] != null && divs[i].className == 'postbody'){

/*le code sera ici */

}
par ça
Code:
if(divs[i] != null && divs[i].className == 'contenuMsg'){

/*le code sera ici */

}
~~» Comment installer le code ?

* Si vous êtes sous FA, il vous suffit de créer une nouvelle page javascript (PA >> modules >> HTML & Javascript >> Gestion des codes Javascript), d'y copier/coller votre js et d'afficher sur toutes les pages.

* Si vous êtes sous Xooit, il faut ajouter dans le template "overall_header", juste après la balise
Code:
<head>
le code suivant
Code:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script language="JavaScript" type="text/javascript">
   <!--
      Votre JS ici
   //-->
</script>



Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].



Je soussignée, Miettes, accepte qu'un directeur reposte le tutoriel "Ajouter des balises BBcode" tel que je l'ai rédigé.
avatar

Miettes

Doyenne

Bons Points (BP) : 174
MessageSujet: Re: Ajouter des balises BBcodes à vos forums   Ven 7 Nov - 13:43
Complément d'Isaline

Faire un bouton dans l'éditeur



Pour que ce BBCode soit accessible via l'éditeur, créez un autre Javascript, mettez le placement sur les sujets et mettez ceci:

Code:
$(function(){$(function(){
  $('<a class="sceditor-button sceditor-button-exp" unselectable="on" title="Truc"><div unselectable="on" style="background-image:url(http://illiweb.com/fa//i/smiles/star3.png)">Truc</div></a>').insertAfter('.sceditor-button-fahide').click(function(){
      $('#text_editor_textarea').sceditor("instance").insertText("[truc]","[/truc]");
  });     
})});

Remplacez tous les "truc" par votre BBCode. La partie

Code:
<div unselectable="on" style="background-image:url(http://illiweb.com/fa//i/smiles/star3.png)">

correspond à l'image affichée sur l'éditeur, qui est ici ceci: .
Pour mettre une nouvelle image, remplacez
Code:
http://illiweb.com/fa//i/smiles/star3.png
par votre image.
 

Ajouter des balises BBcodes à vos forums

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1
 Sujets similaires
-
» Ajouter du texte dans un textbox . [ RESOLU ]
» Ajouter l'option "Contacter l'auteur"
» Ajouter des icones POI sur le 1490T
» Fond de carte perso sur 60Csx
» Bbox en Wifi avec Mac + deux PC à ajouter reliés par ethernet ???

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage-
Sauter vers:  
Espace Admin du site

©2008-2016 - School Of Progress - Toute reproduction totale ou partielle est interdite.
Design réalisé par Mewyn - Forum hébergé par forumactif.com

Les logos des SoPiens

Nos correspondants