Laden Sie NeoFrag herunter
Anmelden

[BBCODE] Création de balise : "Spoiler"

62 Ansichten
[BBCODE] Création de balise : "Spoiler"
FunKyWizzarD

2 Fach, 14 Antworten
Ungelesene Nachricht
==== TUTORIEL VALABLE POUR LA RELEASE ALPHA 0.1 (en 0.1.1 il y a moins de code ^^) ====
==== Un petit merci ne fait pas de mal :3 ====

Bonjour à tous,

Cela fait maintenant plus de deux semaines que je teste ce CMS et franchement il est propre ;) ! Un gros Gg' à FoxLey et à eResnova pour leur boulot !
Aujourd'hui je vais vous montrer comment rajouter des balises type BBCODE dans la librairie wbbtheme (utilisé pour le texte) et plus précisément une balise SPOILER (Très utile si vous ne voulez pas spoiler la fin de la saison 5 de GoT ;) ! )

Tout d'abord munissez-vous du fichier text_editor.php à l'addresse suivante ./neofrag/libraries/text_editor.php
Vous trouverez en premier lieu ceci :

class TextEditor extends Library
{
private $_bbcode = array(
'\>' => '>',
'\<' => '<',
[...]
'(<(((ul|pre).*?)|(/(div|ul|li|h[1-6])))>)\x0A([^\x0A])' => '\1\7',
'\x0A' => '<br />',
'\</div\>\<br /\>\<div' => '</div><div'
 #######Code à rajouter ici !#######
);
[...]

Rajoutez-y ceci :

'\[spoiler\]([\S\s]+?)\[/spoiler\]' => '<a id="show_id" href="#show_id" onclick="document.getElementById(\'spoiler_id\').style.display=\'\'; document.getElementById(\'show_id\').style.display=\'none\';" class="link">[Spoiler]</a><span id="spoiler_id" style="display: none"><a id="spoiler-text" href="#spoiler-text" onclick="document.getElementById(\'spoiler_id\').style.display=\'none\'; document.getElementById(\'show_id\').style.display=\'\';" class="link">[Cacher]</a><br>\1</span>',

Source du code pur : http://gendou.com/t/26412 + Modification : Moi même

Le code à rajouter doit être de cette forme :

'\[nomdevotrebalise\] ([\S\s]+?) \[/nomdevotrebalise\]' => '<a id="code_html"> \1 </a>'


Informations importantes :
Les \ ici ont pour but de "protéger" les [ ] ou les ' ' sous cette forme : \[ \] \' \' Il faut bien savoir les placer.
Le \1 représente la variable ([\S\s]+?) (type : texte) nous pouvons en avoir plusieurs, c'est à dire \2 \3 \4 et ainsi de suite...

Maintenant troisième étape , trouvez ce code :

private $_htmlcode = array(
'<br>' => "\n",
'<b>([\S\s]*?)</b>' => '\1',
[...]
'<span style="font-size: (\d*?)px;">([\S\s]*?)</span>' => '[size=\1]\2[/size]',
'<span style="color: ([a-zA-Z]+|#([0-9a-fA-F]{3}){1,2});">([\S\s]*?)</span>' => '[color=\1]\3[/color]',
 #######Code à rajouter ici !#######
);
[...]

Nous allons faire la même chose mais dans l'autre sens, vous allez comprendre :

'<a id="show_id" href="#show_id" onclick="document.getElementById(\'spoiler_id\').style.display=\'\'; document.getElementById(\'show_id\').style.display=\'none\';" class="link">[Spoiler]</a><span id="spoiler_id" style="display: none"><a id="spoiler-text" href="#spoiler-text" onclick="document.getElementById(\'spoiler_id\').style.display=\'none\'; document.getElementById(\'show_id\').style.display=\'\';" class="link">[Cacher]</a><br>([\S\s]*?)</span>' => '[spoiler]\1[\spoiler]'

Maintenant, vous sauvegardez, vous re-uploadez votre fichier sur votre FTP et il ne vous restera plus qu'à tester !
Quand vous rédigerez un message maintenant vous pourrez utiliser la balise spoiler en faisant [spoiler]VOTRE TEXTE[/spoiler], puis envoyer :)

Résultat final :



Le seul soucis que j'ai, c'est que la fonction spoiler n'apparaît pas dans la toolbar... Les fichiers à modifier pour rajouter l'icone sont :
  • ./neofrag/themes/default/css/wbbtheme.css
  • ./neofrag/themes/default/js/jquery.wysibb.min.js
  • ./neofrag/themes/default/js/jquery.wysibb.fr.js
Mais c'est très fouillis... Je vous préviens ;)

Espérant que mon premier tutoriel vous aura plu :) je sais que mon code n'est pas forcément très propre mais ça fonctionne ^^.
J'avais testé une autre méthode avec un beau bouton, mais il ne reconnaissait plus la fonction onclick
Si des personnes veulent reprendre ce code et l'améliorer libre à vous :)

FunKyWizzarD.
Rückkehr
5 Teilnehmer
7 Antworten
Zaekof

38 Fach, 883 Antworten

Mitwirkende Geber
Ungelesene Nachricht
très intéressent, a tester pour la 0.1.1 après ^^
"N'arrêtez jamais d'apprendre" !
Lyogi

20 Fach, 97 Antworten
Ungelesene Nachricht
Merci du partage :P
candelier

1 Fach , 14 Antworten
Ungelesene Nachricht
je ne pas réussi a le maitre

Zaekof

38 Fach, 883 Antworten

Mitwirkende Geber
Ungelesene Nachricht
Candelier tu dis quoi ?
"N'arrêtez jamais d'apprendre" !
FunKyWizzarD

2 Fach, 14 Antworten
Ungelesene Nachricht
Problème rencontré : On ne peut mettre que un spoiler par page ^^'
Causé par : Le nom des div qui sont toutes les mêmes...
Je cherche actuellement une solution.
kotshiro

2 Fach, 6 Antworten
Ungelesene Nachricht
Attribut une id différentes avec le n° des post par exemple.
Zaekof

38 Fach, 883 Antworten

Mitwirkende Geber
Ungelesene Nachricht
oui, ça devrait marcher
"N'arrêtez jamais d'apprendre" !
Rückkehr