faire son propre BB-Code
-
Bonjour à tous,
Donc comme si bien dit dans mon titre je vais vous expliquer comment faire un système de bbcode en php.
Et pour ceux qui ne savent pas ce qu'est le bbcode c'est un système de balise utilisé principalement sur les forums par exemple ici si vous voulez mettre un image avec un lien (si comme moi vous écrivez le bbcode à la main à la place d'utiliser l'interface) vous aurez un "code" comme celui-ci:
[url=http://mon_utrl/][img=mon_image.png][/url]mais une fois traité il s'affichera sous une forme html:
<a href="http://mon_url/" target="_blank"> <img src="mon_image.png" border="0" /> </a>ps: dans mon contexte les liens s'ouvrent dans un onglet et le desactive les bords pour IE
Pourquoi ne pas laisser le code html aux utilisateurs/clients?
Parce que celà fait une faille XSS ([plus d'info sur ce topic](<base_url>/topic/479-faille-de-s%C3%A9curit%C3%A9-les-plus-fr%C3%A9quente-en-relation-directindirect-php/)) même si vous pouvez aussi en désactiver/activer certaines seulement.
Je vais donc vous expliquer comment faire:
-
une balise orpheline (ex: [ img=], elle n'a aucune fermeture)
-
une balise non-orpheline (ex: [ code]
-
une balise non-orpheline + paramètre (ex: [ url=], il y a un paramètre en plus dans la balise)
Donc pour faire notre bbcode vous allons utiliser ce qui s'appel des expressions régulières (aussi appelé "motif de recherche"), un truc que personnellement je n'aime pas car je me trompe souvent... Et donc une expression c'est en réalité une structure dans un texte (par exemple) on peut donc analyser s'il y a des chiffres, une chaîne de caractères ou autre, c'est souvent utilisé pour les e-mails pour voir si ce que vous avez entré ressemble à un e-mail, je ferais donc peut-être (si j'ai le courage un topic sur ça, sinon je connais un site assez bien.
Bref donc nous allons commencer par une balise orpheline:
// Contexte: J'ai fais une shoutbox et je mettre en place une balise [ img=] donc <img... en html $msg = "Bonjour! [img=heart.gif]"; $bb = '#\[ img=(.+)\]#iUs'; $htm = '<img src="$1" border="0" />'; $msg = preg_replace($bb, $htm, $msg);Donc l'expression: '##iUs'
-
Elle est délimité par des #
-
On utilise les antislashes ("") avant certains caractères car ils peuvent être utilisé pour la structure (expression), caractères tels "[", "]", "(", ")", ...
-
"(.+)" :
-
- les parenthèses "()" symbolise un groupement littéral
-
- le point (".") symbolise qu'il peut s'agir de n'importe quel caractère et le plus ("+) symbolise qu'il peut y avoir 1 ou plusieurs caractères
-
"#iUs' :
-
- "i" effectuer une recherche insensible à la casse (par de différence entre une lettre majuscule et une minuscule).
-
- "U" cette option inverse la tendance à la gourmandise des expressions rationnelles.
-
- "s" permet au point "." de correspondre à encore plus de caractères et/ou un retour à la ligne.
Maintenant une balise pour center donc [centre][/centre] devient <center></center>, je vais un peux compacter le code pour avoir plus simple:
$msg = "[centre]Coucou![/centre]"; $msg = preg_replace('#\[centre\](.+)\[\/centre\]#iUs', '<center>$1</center>', $msg);Il a donc suffit de déplacer "(.+)" et pour ceux qui n'avait pas encore compris la partie trouvée ici va remplacer le "$1", il sagit en réalité d'un tableau donc quand vous cherchez plusieurs expressions vous avez donc "$2", "$3",.. qui arrive.
Nous allons donc maintenant avoir une balise avec un paramètre et pour complexer un peut on va dire que le paramètre est obligatoirement un chiffre décimal ^-^
// balise [taille=][/taille] remplacée par <font size=""></font> $msg = "[taille=5]Hello World! [/taille]"; $msg = preg_replace('#\[taille=(\d+)\](.+)\[\/taille\]#iUs', '<font size="$1">$2</font>', $msg);Comme vous le voyait j'ai mis la mettre "\d" à la place d'un "." donc à la place de chercher n'importe quel caractère je dis que c'est un chiffre décimal et le "+" spécifie qu'il peut-être composé de plusieurs chiffres même si je pense que font-size ne peut prendre que une valeur entre 1 et 5 j'aurais pu mettre directement "([1-2-3-4-5])" mais bon je ferais une explication plus détaillée dans un prochain topic
PS: pour les smileys c'est un simple str_replace():
str_replace(":D", "<img src=\"images/smiley.gif\" />", $msg);PPS: et si vous avez plusieurs balise directement vous pouvez faire un tableau (si vous voulez vous pouvez mettre par exemple $htm[0] = "<b>$1</b>"; et donc pour reprendre toutes les balises faites + anti-faille XSS dans une fonction:
function BBCode($msg = '') { $msg = htmlentities($msg); // suprresion des caractères spéciaux (html), à placer avant les modifications sinon vous affichez le message avec les balises (en lisible) $bb = array( '#\[img=(.+)\]#iUs', '#\[centre\](.+)\[\/centre\]#iUs', '#\[taille=(\d+)\](.+)\[\/taille\]#iUs', '#\[url=(\.*)\](.+)\[\/taille\]#iUs' ); $htm = array( '<img src="$1" border="0" />', '<center>$1</center>', '<font size="$1">$2</font>', '<a src="$1" target="_blank">$2</a>' ); return preg_replace($bb, $htm, $msg); } echo BBCode("[centre]<b>XSS</b>[/centre]");/!\j'ai mis des espaces dans les balises pour pouvoir publier (ex: "[ img]")!
Bonne programmation à tous!
Cordialement,
Mars073
-
-
$msg = "Bonjour!
";$bb = '#[ img=(.+)]#iUs';
$htm = '<img src="$1" border="0" />';
$msg = preg_replace($exp, $htm, $msg);
Un petit problème sur $exp
Sinon bon tutoriel, qui peut utilisé avec ob_start pour un rendu plus simple (Pas forcement meilleur mais plus simple à mettre en place)
-
Un petit problème sur $exp
Ah.. oui merci j'avais mis $bb par la suite pour que ça soit plus compréhensible mais j'ai oublié de changer en dessous. ^^'
Personnellement je préfère preg_
-
Personnellement je préfère preg_
Peut être une incompréhension de ma part mais ob_start n'est pas fait pour les expressions regulières mais pour retenir le flux d'une page.
Ainsi :
function callback($buffer) { $lang_array = array( "{path}" => $_SESSION['lang'], "{top_menu_aboutus}" => "About Us", "{top_menu_register}" => "Register", "{top_menu_user_disconnect}" => "Disconnect", ); $rval = str_replace(array_keys($lang_array),array_values($lang_array),$buffer); //Ou les expressions régulières return $rval; } ob_start("callback"); //Html ob_end_flush();Si ça intéresse quelqu'un, je veux bien faire un tutoriel à ce sujet.
-
Non c'est plutôt moi qui me suis mal exprimé, je voulais dire je n'aime pas faire genre ça:
function BBCode($msg) { $msg = htmlentities($msg); // suppresion des caractères spéciaux (html), à placer avant les modifications sinon vous affichez le message avec les balises (en lisible) $bb = array( '#\[img=(.+)\]#iUs', '#\[centre\](.+)\[\/centre\]#iUs', '#\[taille=(\d+)\](.+)\[\/taille\]#iUs', '#\[url=(\.*)\](.+)\[\/taille\]#iUs' ); $htm = array( '<img src="$1" border="0" />', '<center>$1</center>', '<font size="$1">$2</font>', '<a src="$1" target="_blank">$2</a>' ); return preg_replace($bb, $htm, $msg); } ob_start("BBCode"); ?> blablabla.... <?php ob_end_flush(); ?>mais bon c'est juste relative à ma structure pour celà que j'ai précisé "personnellement", car dans ce cas-ci j'empêche l'utilisateur utiliser du html et je lui colle le bbcode mais bon ça c'est vraiment propre à l'hygiène de code de chacun, un peu comme ceux qui use la tabulateur ou 2/4 espaces ^^
-
Très bon tutoriel, tout à fait du niveau d'un modérateur, bien joué mars.
+1 rep.(Tabulateur > all).
-
Bonjour ! Vous semblez intéressé par cette conversation, mais vous n’avez pas encore de compte.
Marre de refaire défiler les mêmes messages ? Créez un compte pour retrouver votre position, recevoir des notifications des nouvelles réponses, sauvegarder vos favoris et voter pour les messages que vous appréciez.
Grâce à votre participation, ce message peut devenir encore meilleur 💗
S'inscrire Se connecter