[Tutoriel] Ajout de boutons sous IPB 2.0

[Melkendar]

Tutoriel écrit et réalisé par Llaumgui un grand merci à lui

 

*****

 

Bonjours, comme vous l’aurez remarqué, IPB 2.x introduit la possibilité d’ajouter du bbCode directement via l’admin (ACP). Or, si les Geeks tapent le bbCode à la main, n’est pas Geek qui veut et avoir des boutons en plus pourrait se révéler utile.

 

Le but de ce tutorial est donc de vous apprendre à rajouter vos boutons pour les bbCodes de type : [tag]{content}[/tag] (Utilisant la méthode simpletag()) ainsi que les tags plus complexes de type [tag={option}]{content}[/tag]

 

 

I. Ajouter le bouton :

 

Ca se passe dans votre ACP :

Skins & Templates / Skin Manager / Votre skin / Edit Root Skin Template HTML / Post Screen / postbox_buttons

 

Observons le code d’un bouton déjà existant, le bouton souligner (U) dans notre exemple :

<input type="button" accesskey="u" value=" U " onclick="simpletag('U')" class="codebuttons" name="U" style="text-decoration: underline;" onmouseover="hstat('under')" />

 

Explications :

• Accesskey : Raccourcis clavier : Alt + Accesskey.
  
• Value : Texte affiché dans le bouton. Mise en page de ce texte dans style="text-decoration: XXX;".
  
• Name : C'est le nom de l’entré <input /> dans le formulaire (<form>).
  
• Onmouseover : Aide affichée lors du survole du bouton. Si vous renseignez cette option pensez à lire les remarques, Mais sachez que Matt les a pas mis pour HTML et SQL....
  
• onclick="simpletag('X')" : Méthode JavaScript qui affiche le tag (Voir chapitre suivant).
  

Prenons maintenant l’exemple du tag CENTER dont nous voulons ajouter un bouton. Pour ça, rien de plus simple, ajoutez simplement en dessous du bouton vu précédement :

<input type="button" accesskey="c" value=" CENTER " onclick="simpletag('CENTER')" class="codebuttons" name="CENTER" onmouseover="hstat('center')" />

 

Remarques :

1. Pour les messages privés, pensez aussi à éditer : "Skins & Templates / Skin Manager / Votre skin / Edit Root Skin Template HTML / Post Screen / pm_postbox_buttons".
   
2. Les boutons HTML et SQL sont mis en commentaire, pour les afficher, décommentez les. Pour le boutons liste il est caché (type="hidden"), pour l'afficher remplacez par type="button".
   
3. Pour ceux qui veulent ajouter l'aide au survole du bouton, et qui ont donc rajouté onmouseover="hstat('center')" dans la balise <input /> : Pensez à donner une valeur à center dans : "Skins & Templates / Skin Manager / Votre skin / Edit Root Skin Template HTML / Post Screen / get_javascript" :

   var help_center		  = "Center le texte";

   Pour les puristes qui ne veulent pas hardcoder, sachez que le fichier langue correspondant est lang_post.php.
   

 

 

II. Mettre le tag en fonction :

 

A ce niveau, vous avez un super bouton centrer, mais qui ne marche pas... Normal, il n’est pas activé et la méthode simpletag('') plante.

Pour activer le bouton, rien de plus simple, ouvrez le fichier : jscripts / ipb_bbcode.js.

Ajoutez y simplement votre tag en dessous de :

var HTML_open = 0;

Ce qui donnerais dans notre exemple (CENTER) :

var CENTER_open = 0;

 

 

 

III. Tag plus complexes :

 

Maintenant que la méthode simpletag() n'a plus de secret pour vous on va passer à des chose plus complexe, c'est à dire les tags avec option : [tag={option}]{content}[/tag].

Nous allons donc créer un bouton pour le tag fieldset :

<fieldset><legend><strong>{option}</strong></legend>{content}</fieldset>

[fieldset={option}]{content}[/fieldset]

 

Si vous avez bien suivie la première partie, vous avez le bouton suivant :

<input type="button" accesskey="f" value=" FIELDSET " onclick="tag_fieldset()" class="codebuttons" name="FIELDSET" style="text-decoration: none;" onmouseover="hstat('FIELDSET')" />

 

Comme vous le voyez, nous n'utilisons plus simpletag() mais tag_fielset() qu'il reste donc à définir dans ipb_bbcode.js...

Pour cela appuyez vous sur le code de tag_html() par exemple que je vous mets et commente si dessous :

function tag_url()
{
   var FoundErrors = '';

   // Première fenêtre où l'on demande de rentrer l'url. text_enter_url est une variable du fichier langue.
   var enterURL   = prompt(text_enter_url, "http://");

   // Deuxième fenêtre où l'on demande de rentrer le nom du lien.
   var enterTITLE = prompt(text_enter_url_name, "My Webpage");

   // Si erreur trouvée :
   if (!enterURL) {
       FoundErrors += " " + error_no_url;
   }
   if (!enterTITLE) {
       FoundErrors += " " + error_no_title;
   }

   if (FoundErrors) {
       alert("Error!"+FoundErrors);
       return;
   }

   // Tout est bon !!! Enjoy ;)
   doInsert("[URL="+enterURL+"]"+enterTITLE+"[/URL]", "", false);
}

 

Ce qui nous donne au finale pour notre fieldset :

function tag_fieldset()
{
   var FoundErrors = '';
   var enterTITLE   = prompt( 'Titre', "Titre");
   var enterCONTENT = prompt( 'Contenu', "Contenu du cadre");

   if (!enterTITLE) {
       FoundErrors += " " + 'Veuillez rentrer un titre';
   }
   if (!enterCONTENT) {
       FoundErrors += " " + 'Veuillez rentrer un contenu';
   }

   if (FoundErrors) {
       alert("Error!"+FoundErrors);
       return;
   }

   doInsert("[fieldset="+enterTITLE+"]"+enterCONTENT+"[/fieldset]", "", false);
}

 

Remarque : Là encore j'ai hardcodé, mais libre à vous d'utiliser les fichiers langue

 

 

Liens utiles :CodeBB : Soumission et partage.

BBCodes Persos: Le Tag [pop].

La base de connaissances Invision Power Board.

Reprise de ce tutorial chez moi en présentation tutorial.

[headerguard]

Salut,

 

Je ne trouve pas "Edit Root Skin Template HTML / Post Screen / postbox_buttons"

 

J'ai essayé "Edit Template HTML / Post Screen" mais je n'ai pas trouvé "postbox_buttons"

[Youp3]

C'est un tuto pour ipb 2.0

 

Cherchez :

Edit Template HTML > Post Screen > postbox_buttons

Je peux vous assurer que dans un skin normalement constitué cela existe (essayez avec le skin de base)