Aller au contenu

faire son propre BB-Code


mars073
 Share

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

Modifié par mars073
mauvaise variable :x
  • Upvote 3
Lien vers le commentaire
Partager sur d’autres 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
Lien vers le commentaire
Partager sur d’autres 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.

Modifié par Evaelis
Lien vers le commentaire
Partager sur d’autres 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 ^^

Modifié par mars073
faille...
Lien vers le commentaire
Partager sur d’autres sites

  • 1 year later...

Join the conversation

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

Invité
Répondre à ce sujet…

×   Vous avez collé du contenu avec mise en forme.   Supprimer la mise en forme

  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.

Chargement
 Share

×
×
  • Créer...