Jump to content
Sign in to follow this  
mars073

faire son propre BB-Code

Recommended Posts

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) 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.

 

> Documentation PHP::Options de recherche

 

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

Edited by mars073
mauvaise variable :x
  • Upvote 3

Share this post


Link to post
Share on other sites

 

$msg = "Bonjour! heart.gif";

$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)

  • Upvote 1

Share this post


Link to post
Share on other sites

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_

Share this post


Link to post
Share on other sites

 

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.

Edited by Evaelis

Share this post


Link to post
Share on other sites

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

Edited by mars073
faille...

Share this post


Link to post
Share on other sites

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












(Tabulateur > all).

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...