Formulaire bbcode avec passage en html

Contenu du snippet

Un simple formulaire qui permet (grâce a du Javascript) a vos visiteurs (ou autre) de pouvoir utiliser le BBcode aussi bien en l'écrivant manuellement qu'en cliquant sur les boutons disponible.

Attention, le script ne gère pas les multi code/quote et n'est pas sécurisé.

Source / Exemple :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title>Formulaire BBcode</title>
<link rel="shortcut icon" href="favicon.ico" />
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<meta http-equiv="content-language" content="fr" />

<script type="text/javascript">
<!--
function insertion(repdeb, repfin) {
  var input = document.forms['formulaire'].elements['saisie'];
  input.focus();
  /* pour l'Explorer Internet */
  if(typeof document.selection != 'undefined') {
    /* Insertion du code de formatage */
    var range = document.selection.createRange();
    var insText = range.text;
    range.text = repdeb + insText + repfin;
    /* Ajustement de la position du curseur */
    range = document.selection.createRange();
    if (insText.length == 0) {
      range.move('character', -repfin.length);
    } else {
      range.moveStart('character', repdeb.length + insText.length + repfin.length);
    }
    range.select();
  }
  /* pour navigateurs plus récents basés sur Gecko*/
  else if(typeof input.selectionStart != 'undefined')
  {
    /* Insertion du code de formatage */
    var start = input.selectionStart;
    var end = input.selectionEnd;
    var insText = input.value.substring(start, end);
    input.value = input.value.substr(0, start) + repdeb + insText + repfin + input.value.substr(end);
    /* Ajustement de la position du curseur */
    var pos;
    if (insText.length == 0) {
      pos = start + repdeb.length;
    } else {
      pos = start + repdeb.length + insText.length + repfin.length;
    }
    input.selectionStart = pos;
    input.selectionEnd = pos;
  }
  /* pour les autres navigateurs */
  else
  {
    /* requête de la position d'insertion */
    var pos;
    var re = new RegExp('^[0-9]{0,3}$');
    while(!re.test(pos)) {
      pos = prompt("Insertion à la position (0.." + input.value.length + "):", "0");
    }
    if(pos > input.value.length) {
      pos = input.value.length;
    }
    /* Insertion du code de formatage */
    var insText = prompt("Veuillez entrer le texte à formater:");
    input.value = input.value.substr(0, pos) + repdeb + insText + repfin + input.value.substr(pos);
  }
}
//-->
</script>

</head>
<body>

Ecrire un message<br /> 

  <form name="formulaire" method="post"  action="?page=ecrire_message">
    <input type="button" value="G" onClick="insertion('[b]', '/b')">
    <input type="button" value="I" onClick="insertion('[i]', '/i')">
    <input type="button" value="U" onClick="insertion('[u]', '/u')">
    <input type="button" value="S" onClick="insertion('[s]', '/s')">

    <input type="button" value="Utilisateur" onClick="insertion('[user]', '/user')">
    <input type="button" value="Citation" onClick="insertion('[quote=Auteur]', '/quote')">
    <input type="button" value="URL" onClick="insertion('[url]', '/url')">
    <input type="button" value="IMG" onClick="insertion('[img]', '/img')"> 
    
    <select name="select" onChange="insertion('[couleur='+this.options[this.selectedIndex].value+']', '/couleur')" id="select">
    <option style="color:#000000;" value="#000000" selected="selected">Noir</option>
    <option style="color:#FF0000;" value="#FF0000">Rouge</option>
    <option style="color:#660000;" value="#660000">Rouge Foncé</option>
    <option style="color:#00FF00;" value="#00FF00">Vert</option>
    <option style="color:#006600;" value="#006600">Vert Foncé</option>
    <option style="color:#0000FF;" value="#0000FF">Bleu</option>
    <option style="color:#000066;" value="#000066">Bleu Foncé</option>
    <option style="color:#FFFF00;" value="#FFFF00">Jaune</option>
    <option style="color:#666600;" value="#666600">Jaune Foncé</option>
    
    </select>

    <br/>
    <textarea name="saisie" cols="60" rows="10">Votre message</textarea>
    <input type="submit" value="Prévisualiser" />
  </form>

<?php

if (isset($_POST['saisie']))
{

/* Fonction de transformation du BBcode */
function bbcode($texte){
	// Conversion des caractères HTML
	$texte = htmlentities($texte);
	// Tableau de Regex
	$format_search =  array(
		'#\[b\](.*?)\/b\#is', // Gras ([b]Texte en gras/b
		'#\[i\](.*?)\/i\#is', // Italique ([i]Texte en italique/i
		'#\[u\](.*?)\/u\#is', // Souligné ([u]Texte souligné/u)
		'#\[s\](.*?)\/s\#is', // Surligné ([s]Texte surligné/s)
		'#\[quote=(.*?)\](.*?)\/quote\#is', // Quote avec auteur ([quote=Auteur]Auteur a écris : blablabla/quote)
		'#\[quote\](.*?)\/quote\#is', // Quote ([quote]Citation : blablabla/quote)
		'#\[user\](.*?)\/user\#is', // Utilisateur ([user]Pseudo/user)
		'#\[code\](.*?)\/code\#is', // Code [code]Code... <?php ... ?>/code)
		'#\[size=([1-9]|1[0-9]|20)\](.*?)\/size\#is', // Taille texte -> Font size 1-20px [size=20]Texte/size)
		'#\[couleur=\#?([A-F0-9]{3}|[A-F0-9]{6})\](.*?)\/couleur\#is', // Couleur texte ([color=#00F]Texte/color)
		'#\[url=((?:ftp|https?)://.*?)\](.*?)\/url\#i', // Lien avec description ([url=http://url]texte/url)
		'#\[url\]((?:ftp|https?)://.*?)\/url\#i', // Lien sans description ([url]http://url/url)
		'#\[img\](https?://.*?\.(?:jpg|jpeg|gif|png|bmp))\/img\#i', // Image ([img]http://url_de_limage/img)
		'#\[adminlink=(.*?)\](.*?)\/adminlink\#is' // Quote avec auteur ([quote=Auteur]texte/quote)
		);
		
	// Tableau de transformation
	$format_replace = array(
		'<strong>$1</strong>',
		'<em>$1</em>',
		'<span style="text-decoration: underline;">$1</span>',
		'<span style="text-decoration: line-through;">$1</span>',
		'<blockquote><strong>Ecrit par $1 : </strong><br/>$2</blockquote>',
		'<blockquote><strong>Citation : </strong><br/>$1</blockquote>',
		'<strong>$1</strong>',
		'<pre>$1</'.'pre>',
		'<span style="font-size: $1px;">$2</span>',
		'<span style="color: #$1;">$2</span>',
		'<a href="$1">$2</a>',
		'<a href="$1">$1</a>',
		'<img src="$1" alt="" />',
		'<a href="$1">$2</a>'
		);

	// Conversion du texte
	$texte = preg_replace($format_search, $format_replace, $texte);

	// Mise en forme du texte
	$texte = nl2br($texte);
	return $texte;
}

/* Fonction vérification de la validité du pseudo  */
function checkpseudo($pseudo)
{
	if($pseudo == '') return 'empty'; /* Vérifie si le pseudo n'est pas vide */
	else if(strlen($pseudo) < 5) return 'tooshort'; /* Si il contient au moins 5 caractères */
	else if(strlen($pseudo) > 15) return 'toolong'; /* Si il contient au maximum 15 caractères */
	
	else
	{
		$result = mysql_query("SELECT COUNT(*) FROM bdd_user WHERE pseudo= '".mysql_real_escape_string($pseudo)."'") or die ('Erreur ligne '.__LINE__.' - Info erreur : '.mysql_error());
		$end_result = mysql_fetch_array($result);
		
		if($end_result['COUNT(*)'] > 0) return 'exists'; /* Si le pseudo existe */
		else return 'unkown'; /* Si il est introuvable */
	}
}

$texte = $_POST['saisie'] ;

preg_match_all("#(.*?)\[user\](.*?)\/user\(.*?)#is", $texte, $user_name, PREG_SET_ORDER); /* On recherche si l'utilisateur a entré la balise [user]/user et on enregistre son contenu */

/* Contenu de la variable $user_name
$user_name[0][0] -> [user]Nom utilisateur1/user
$user_name[0][1] -> Tout ce qui se trouve avant : [user]
$user_name[0][2] -> Nom utilisateur1
$user_name[0][3] -> Tout ce qui se trouve après : /user

Si plusieurs balise utilisateur
$user_name[1][0] -> [user]Nom utilisateur2/user
$user_name[1][1] -> Tout ce qui se trouve avant : [user]
$user_name[1][2] -> Nom utilisateur2
$user_name[1][3] -> Tout ce qui se trouve après : /user

etc...

  • /
for($i=0; $i<count($user_name) ; $i++) /* On vérifie combien de fois la balise a été détecte grâce a l'array : $user_name */ { $retour_cp = checkpseudo(trim(strtolower($user_name[$i][2]))) ; if ($retour_cp == 'ok' ) /* Un résultat à été trouver, on extrait donc les informations de la base de donnée */ { $user_info = mysql_query("SELECT id FROM bdd_user WHERE user_name='".mysql_real_escape_string($user_name[$i][2])."'") or die ('Erreur ligne '.__LINE__.' - Info erreur : '.mysql_error()); $user_info = mysql_fetch_assoc($user_info); $texte = str_replace($user_name[$i][0], $user_name[$i][1].'[adminlink=?page=info_user&id='.$user_info['id'].']'.$user_name[$i][2].'/adminlink'.$user_name[$i][3], $texte) ; /* On remplace la balise complète [user]Nom utilisateur1/user par : "Ce qu'il y a avant", le lien vers l'utilisateur et son pseudo, "ce qu'il y à après" */ } else /* Sinon on met le pseudo saisie en gras */ { $texte = str_replace($user_name[$i][0], $user_name[$i][1].'[b]'.$user_name[$i][2].'/b'.$user_name[$i][3], $texte) ; } } $texte = bbcode($texte) ; /* On passe tout ça dans le parser */ echo 'Texte converti : <br /><br />'.$texte ; } ?>

A voir également

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.