Search the Community

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

CONSEILS SUR LA MISE EN FORME DES SUJETS Lorsque vous créez un sujet, il est important qu’il soit clair et lisible. Pour cela, vous avez à votre disposition le BBCode qui permet de mettre en forme votre texte (couleur, police d’écriture, taille du texte, …). De plus, si votre sujet est assez long, vous devez le séparer en plusieurs paragraphes et parties. Bien sûr, Melinyel ne vous impose aucune norme et vous êtes libre d’organiser votre sujet comme bon vous semble. 1. Ecriture du sujet 1.1 Le titre Le titre du sujet est un point très important. En effet, il permet aux lecteurs de comprendre de quoi traite le sujet sans pour autant avoir regardé le contenu. De plus, il a une utilité très importante pour le référencement du sujet, il faut donc bien choisir ses mots-clés. 1.2 Les mots clés Les mots-clés ou étiquettes du sujet améliorent considérablement la visibilité du sujet sur un moteur de recherche. Il est donc très important de compléter cette case avec des mots-clés méticuleusement sélectionnés dans votre sujet. 1.3 Le contenu Le contenu de votre sujet doit être riche et compréhensible. Il doit permettre au lecteur, à la fin de votre sujet, d’avoir une réponse claire et précise sur la problématique posée par le sujet. 2. Mise en forme 2.1 La typographie Lorsque votre sujet devient assez long, il est important de le diviser en plusieurs parties et en plusieurs paragraphes pour une meilleur lisibilité du sujet et pour faciliter les recherches dans celui-ci. Quelques petits conseils pour la typographie : Introduisez le sujet en posant une problématique accompagnée d’une amorce et d’un plan. Développez le sujet en plusieurs parties et paragraphes pour répondre à la problématique. Concluez le sujet en reprennant les grandes lignes de chaque partie et d’en tirer un lien logique. 2.2 Le BBCode Le BBCode est un outil puissant pour rédiger un sujet. Il permet de mettre en forme le sujet et ainsi de le rendre plus lisible et compréhensible. Cet outil a aussi une influence dans le référencement du sujet puisque certaines balises permettent d’indiquer aux moteurs de recherche qu’il s’agit d’un mot-clé. Liste des balises BBCode : Texte :Met en gras le texte. Texte :Met en italique de texte. Texte :Souligne le texte. Texte :Colore le texte de la couleur choisie (on peut utiliser le format hexadécimal). Texte :Change la police du texte. Adresse URL :Crée un lien hypertexte. Texte :Texte avec lien hypertexte. Adresse URL :ffiche une image. Adresse URL :Affiche une image avec lien hypertexte. Heureusement, on peut modifier directement le contenu dans la boite de dialogue en sélectionnant le morceau du texte à transformer et à l’aide des outils de la barre BBCode : Vous pouvez aussi trouver quelques BBCodes spécieux dans le troisième icône en haut à gauche :