Créer un BBCode avec PHP et GeSHi

12 Commentaires

Dans ce tutoriel nous allons voir comment faire du zCode (ou bbCode c’est synonyme) avec php et GeSHi. Un bbCode c’est un système utilisé pour permettre aux visiteurs de mettre en forme leurs textes de manière simple et en évitant d’autoriser le code Html dans les champs des formulaires (ce qui est très dangereux !). Le principe est relativement simple, les visiteurs doivent taper des « balises » autour d’une chaine de caractère pour la mettre en forme. Un exemple :

Le visiteur tape ceci :

Lorem ipsum <gras>dolor</gras> sit amet, consectetu

Et automatiquement c’est remplacé par ceci :

Lorem ipsum dolor sit amet, consectetu

Avant d’aller plus loin dans le tutoriel, je vous conseille de regarder l’article sur l’intégration de TinyMCE dans un formulaire, car c’est un script « tout fait » beaucoup plus fonctionnelle et performant que celui que je propose. Néanmoins il est plus lourd …
De plus dans le tutoriel que je vous propose, nous allons créer une balise « <code> » qui permet d’insérer du code (html, css, php et bien plus) et de le colorer automatiquement (comme sur notepad++ ou scite par exemple) !


Tutoriel Vidéo : Créer un Zcode (bbcode) avec PHP et Geshi
envoyé par zone-tuto. – Vidéos des dernières découvertes scientifiques.

Contrairement aux autres tutoriels, la on peut dire que c’est assez difficile quand même ! Premièrement, ce que je vous conseille c’est d’aller lire les 2 chapitres sur le siteduzéro concernant les expressions régulières (ou regex, c’est la même chose).
Ensuite, il y a quelques petits trucs subtiles comme l’histoire de « gourmand – non gourmand » dans les regex, j’ai vaguement expliqué le bug, mais si vous voulez plus d’information je vous conseille d’aller sur ce site. Pareil pour les options s (explications) et i (explications).
Je pense que vous avez compris le principe du script, mais un petit rappel ne fait pas de mal :

Lorem ipsum <gras>dolor</gras> sit amet, consectetu

Avec une regex, on se débrouille pour repérer la balise « <gras> », ensuite on récupère la chaine qui est après jusqu’à ce qu’on rencontre la balise de fermeture « </gras> » et on remplace tout ça par le code html/css adapté.

Maintenant place aux codes :

1) La page index, le code du formulaire et ce qui nous permet d’afficher le texte :

<?php
	include "zcode/func_code.php";
?>
<form name="form" method="post" action="" style="text-align:center;">
	<textarea name="text" cols="50" rows="20"></textarea><br/>
	<input type="submit" />
</form>
<div>
<?php
	if(isset($_POST['text'])){
		echo zcode($_POST['text']);
	}
?>
</div>

2) Le code de la page func_code.php, le coeur de notre système :

<?php
include "geshi.php";
function zcode($texte){
	$texte = htmlentities($texte);
	$texte = preg_replace_callback("#&lt;code=(.+)&gt;(.*)&lt;/code&gt;#siU", create_function('$matches', 'return code($matches[2], $matches[1]);'), $texte);
	$texte = preg_replace("/&lt;gras&gt;(.*)&lt;\/gras&gt;/siU", "<span class=\"gras\">$1</span>", $texte);
	$texte = preg_replace("/&lt;italique&gt;(.*)&lt;\/italique&gt;/siU", "<span class=\"italique\">$1</span>", $texte);
	$texte = preg_replace("/&lt;souligne&gt;(.*)&lt;\/souligne&gt;/siU", "<span class=\"souligne\">$1</span>", $texte);
	$texte = preg_replace("#&lt;color=(red|green|purple|blue|yellow)&gt;(.*)&lt;/color&gt;#siU", "<span style=\"color:$1\">$2</span>", $texte);
	$texte = mynl2br($texte);
	return($texte);
}
function code($source, $language){
	$source = html_entity_decode($source);
	$code = new GeSHi($source, $language);
	$parse = $code->parse_code();
	$resultat = '<div>Code : '.$language.'<br/>'.$parse.'</div>';
	return ($resultat);
}
function mynl2br($text) {
   return strtr($text, array("\r\n" => '<br />', "\r" => '<br />', "\n" => '<br />'));
}
?>

N’oublier pas de télécharger GeSHi qui nous permet de colorer le(s) code(s) php, css, html et j’en passe (jetez un oeil dans le dossier de geshi pour voir un aperçu de ce qu’il est capable de faire !).

Voilà, je pense avoir fait le tour, j’ai essayé d’être le plus complet possible d’où les répétitions dans le tutoriel, mais c’est nécessaire car les regex c’est assez compliqué et après avoir fait ce tutoriel je suis un peu plus à l’aise avec et on se rend compte de leurs puissances !
Si vous avez des questions laissez des commentaires ou faites un tour sur le forum et je serai ravi de vous aider !

Publié le 15 février 2010 par Madrzejewski Alexis dans Développement web, Tous les tutoriels vidéos

Vous avez aimé ce billet ?

Inscrivez-vous au Flux RSS du blog, suivez-moi sur Twitter ou partager simplement cet article avec vos amis sur Twitter ou Facebook

Inscrivez-vous à la newsletter

Inscrivez-vous à la newsletter en précisant votre prénom et votre adresse email pour recevoir les dernières mises à jour du blog et des tutoriels exclusif par email (En savoir plus)

12 commentaires

Ajouter un commentaire

  1. n3o

    Merci pour le tuto.

    J’aurais une question je comprends pas quelque chose j’ai pris vos fichiers j’ai installé ça fonctionne mais le code qui es coloré et obtenu contient des \ je vois pas pourquoi ?

    Répondre
    • Bonjour,

      C’est vrai que j’ai été un peu vite sur les antislash ! En fait c’est très simple, il y a des caractère spéciaux comme le guillemet  » ou ‘ et le slash / qui font planté notre regex et pour éviter cela on doit « échapper » ces caractères en mettant un anti-slash \ devant. C’est un moyen de dire à notre script « attention, il va y avoir un caractère spécial ». Ce n’est pas valable que pour les regex, c’est aussi valable en php. Un exemple

      <?php
      echo 'Salut ça va ?'; //pas de problème par contre :
      echo 'J\'ai faim'; //Si je ne met pas d'antislash devant ' le script va planter !
      ?>
      
      Répondre
  2. n3o

    Bonsoir non le code ne plante pas mais si je passe votre code :

    J’obtiens dans la page en colorer :

    Code : php

    il me rajoute des slashs

    Sinon je suis pressé de voir le prochain tuto :P

    Je me permet une petite suggestions je suis entrain de me faire un mini cms.

    Et ce que j’aimerais c’est savoir comment intégrer geschi dans ma balise code de façon que lorsque j’écris avec ckeditor comment faire pour que ce qui es dans cette balise

    par exemple mon code celui ci ressorte colorer je n’arrive pas a comprendre

    Bonne continuation.

    Répondre
  3. n3o

    le code php est

    Code php :

    «  »

    Répondre
  4. n3o

    Desole il interprete le code ouarfff !!!!

    donc J\\\’ai faim vous voyez il me rajoute deux slash en plus mais en colorer

    Répondre
  5. n3o

    Bonjour , toujours pas de solution pour mon probléme ?

    Répondre
  6. Pingback: Formulaire de contact en PHP | Tutoriels-Video

  7. Pingback: Formulaire de contact en PHP | Codes Scripts Tutoriels Vidéo

  8. Pingback: Formulaire de contact en PHP | CodesScripts.fr

  9. lebrigandu44

    Merci pour ce tutoriel. Mais j’aimerais savoir s’il est possible de changer le code couleur de GeSHI et si oui comment ?

    Répondre
  10. GOKU

    Bonjour Madrzejewski Alexis =)
    je vous remercie pour les tuto !
    est il possible de faire l’inverse de geshi transformer le code comme a sont état d’origine ?
    j’ai fait plusieurs recherche et tenter de faire un code, mais en vain :(
    j’ai déjà fait l’inverse des balise si vous on avais besoin pour un tuto =)
    bon courage a bientôt.

    Répondre

Ajouter un commentaire


Ici les commentaires sont en DoFollow, profitez-en mais en abusez pas !
Veuillez ne pas poster de code (php, html ou autre) car il sera bloqué par le site.
Les commentaires ne sont pas immédiatement validés.
Merci de faire une recherche sur Google avant de poser une question.