NeoFrag 다운로드
로그인

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

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

2 과목, 14 개
읽지 않은 메시지
==== 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.
반환
5 참가자
7 개
Zaekof

38 과목, 883 개

참여자 기증자
읽지 않은 메시지
très intéressent, a tester pour la 0.1.1 après ^^
"N'arrêtez jamais d'apprendre" !
Lyogi

20 과목, 97 개
읽지 않은 메시지
Merci du partage :P
candelier

1 과목 , 14 개
읽지 않은 메시지
je ne pas réussi a le maitre

Zaekof

38 과목, 883 개

참여자 기증자
읽지 않은 메시지
Candelier tu dis quoi ?
"N'arrêtez jamais d'apprendre" !
FunKyWizzarD

2 과목, 14 개
읽지 않은 메시지
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 과목, 6 개
읽지 않은 메시지
Attribut une id différentes avec le n° des post par exemple.
Zaekof

38 과목, 883 개

참여자 기증자
읽지 않은 메시지
oui, ça devrait marcher
"N'arrêtez jamais d'apprendre" !
반환