FunKyWizzarD
29 years
On my chair ;3
Registered since
Last activity
Groups
recent activity
[BBCODE] Création de balise : "Spoiler"
10 jul 2015
==== 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 ====
==== 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.phpVous 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
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
onclickSi des personnes veulent reprendre ce code et l'améliorer libre à vous :)
FunKyWizzarD.