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 :
HTML
<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).
HTML
<input type="button" accesskey="c" value=" CENTER " onclick="simpletag('CENTER')" class="codebuttons" name="CENTER" onmouseover="hstat('center')" />
Remarques :
- Pour les messages privés, pensez aussi à éditer : "Skins & Templates / Skin Manager / Votre skin / Edit Root Skin Template HTML / Post Screen / pm_postbox_buttons".
- 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".
- 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" :CODEvar 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 :
CODE
var HTML_open = 0;
Ce qui donnerais dans notre exemple (CENTER) :
CODE
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 :
CODE
<fieldset><legend><strong>{option}</strong></legend>{content}</fieldset>
CODE
[fieldset={option}]{content}[/fieldset]
Si vous avez bien suivie la première partie, vous avez le bouton suivant :
HTML
<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 :
HTML
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);
}
{
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 :
HTML
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);
}
{
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
