faire son propre BB-Code

mars073

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:




<pre class="ipsCode prettyprint lang-auto prettyprinted">
[url=http://mon_utrl/][img=mon_image.png][/url]</pre>

mais une fois traité il s'affichera sous une forme html:




<pre class="ipsCode prettyprint prettyprinted">
<a href="http://mon_url/" target="_blank">
<img src="mon_image.png" border="0" />
</a></pre>

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 (<a href="<base_url>/topic/479-faille-de-s%C3%A9curit%C3%A9-les-plus-fr%C3%A9quente-en-relation-directindirect-php/" rel="">plus d'info sur ce topic</a>) 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 <a href="http://www.expreg.com/presentation.php" rel="external nofollow">un site assez bien</a>.





Bref donc nous allons commencer par une balise orpheline:




<pre class="ipsCode prettyprint lang-php prettyprinted">
// 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);</pre>

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.





> <a href="http://au2.php.net/manual/fr/reference.pcre.pattern.modifiers.php" rel="external nofollow">Documentation PHP::Options de recherche</a>





Maintenant une balise pour center donc [centre][/centre] devient <center></center>, je vais un peux compacter le code pour avoir plus simple:




<pre class="ipsCode prettyprint lang-auto prettyprinted">
$msg = "[centre]Coucou![/centre]";
$msg = preg_replace('#[centre](.+)[/centre]#iUs', '<center>$1</center>', $msg);</pre>

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 ^-^




<pre class="ipsCode prettyprint lang-auto prettyprinted">
// balise [taille=][/taille] remplacée par 
$msg = "[taille=5]Hello World! [/taille]";
$msg = preg_replace('#[taille=(\d+)](.+)[/taille]#iUs',
'$2', $msg);</pre>

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():




<pre class="ipsCode prettyprint lang-auto prettyprinted">
str_replace(":D", "<img src="images/smiley.gif" />", $msg);</pre>

PPS: et si vous avez plusieurs balise directement vous pouvez faire un tableau (si vous voulez vous pouvez mettre par exemple $htm[0] = "$1"; et donc pour reprendre toutes les balises faites + anti-faille XSS dans une fonction:




<pre class="ipsCode prettyprint lang-html prettyprinted">
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',
'<a src="$1" target="_blank">$2</a>'
);
return preg_replace($bb, $htm, $msg);
}

echo BBCode("[centre]XSS[/centre]");</pre>

/!\j'ai mis des espaces dans les balises pour pouvoir publier (ex: "[ img]")!





Bonne programmation à tous!


Cordialement,


Mars073

Evaelis

<blockquote class="ipsQuote" data-ipsquote=""><div>
 
$msg = "Bonjour! <img alt="heart.gif" src="http://heart.gif"/>";$bb = '#[ img=(.+)]#iUs';$htm = '<img src="$1" border="0" />';$msg = preg_replace($exp, $htm, $msg);
</div></blockquote>
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)

mars073

<blockquote class="ipsQuote" data-cite="Evaelis" data-ipsquote="" data-ipsquote-contentclass="forums_Topic" data-ipsquote-contentcommentid="7818" data-ipsquote-contentid="728" data-ipsquote-contenttype="forums" data-ipsquote-timestamp="1400585960" data-ipsquote-username="Evaelis"><div>Un petit problème sur $exp</div></blockquote>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_

Evaelis

<blockquote class="ipsQuote" data-ipsquote=""><div>
 
Personnellement je préfère preg_
</div></blockquote>
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 :
<pre class="ipsCode prettyprint">
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();</pre>
Si ça intéresse quelqu'un, je veux bien faire un tutoriel à ce sujet.

mars073

Non c'est plutôt moi qui me suis mal exprimé, je voulais dire je n'aime pas faire genre ça:




<pre class="ipsCode prettyprint lang-html prettyprinted">
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',
'<a src="$1" target="_blank">$2</a>'
);
return preg_replace($bb, $htm, $msg);
}
ob_start("BBCode");
?>
blablabla....
<?php
ob_end_flush();
?></pre>

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 ^^

Azad

Très bon tutoriel, tout à fait du niveau d'un modérateur, bien joué mars. 
+1 rep. (Tabulateur > all).

FaKe77

Bon tuto ! +1

NodeBB

faire son propre BB-Code