Bonjour,

je suis entrain de faire un système de tutoriels et je voudrais que les balises de mises en formes s'affiche automatiquement quand on clique sur le smiley ou autre dans le formulaire d'envoit de tutos.
J'ai déjà fais quelques essai sans succès, voici mon codes :

<?php
	include('../includes/header.php');
	include('../includes/menugauche.php'); ?>
<!-- Box droit -->							
<div id="corps_droit">
		<div id="box_droit">
				<div class="haut_box_droit"><div class="titre_box_droit">Titre !!</div></div>
				<div class="haut_2_box_droit"><div class="marge_box_droit">
				
<?php

include('../includes/fonctions.php');

if(!empty($_SESSION['id']) AND verifier_droit(1))
{
if(!empty($_POST['titre']))
{


	// Securité + vérification si les emails sont identiques
		
	if(($_POST['code_verification']) == 56)
	{
		$titre = htmlspecialchars($_POST['titre']);
		$description = htmlspecialchars($_POST['description']);
		$auteur = $_SESSION['id'];
		$categorie = htmlspecialchars($_POST['categorie']);
		$contenu = htmlspecialchars($_POST['contenu']);
		$date = time();

	// On ajoute dans la BDD et on affiche le message de confirmation

		$requete = $bdd->prepare('INSERT INTO tuto (titre, description, auteur, categorie, contenu, date) VALUES (:titre, :description, :auteur, :categorie, :contenu, :date)');
		$requete->execute(array(
	'titre' => $titre,
	'description' => $description,
	'auteur' => $auteur,
	'categorie' => $categorie,
	'contenu' => $contenu,
	'date' => $date
	));

	echo '<center><font color="green">Votre tutoriel a été envoyé à l\'équipe d\'HabbWired !</font></center>';
	}
 
	// Sinon il y a une erreur (calcul incorrect)
		else
		{
			echo '<center><font color="red">Réponse au calcul incorrecte. Recommencez !</font></center>';
		}
}

?></div></div>
					<div class="milieu_box_droit">
						<div class="marge">
<script type="text/javascript"> 
        <!--
function insertion(repdeb, repfin) {
  var input = document.forms['description'].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> 	
<form name="formulaire" method="post">
	<label for="titre"><b><u>Nom du tuto:</u></b></label>   <input type="text" name="titre" /><br/>
	<label for="categorie"><b><u>Catégorie:</u></b></label>	<select name="categorie" id="categorie">
												<option value="1">Pratique WIRED - Facile</option>
												<option value="2">Pratique WIRED - Moyen</option>
												<option value="3">Pratique WIRED - Pro</option>
												<option value="4">Jeux WIRED - Facile</option>
												<option value="5">Jeux WIRED - Moyen</option>
												<option value="6">Jeux WIRED - Pro</option>
												</select><br/>

<fieldset><legend>Mise en forme</legend>
<input type="button" id="gras" name="gras" value="Gras" onClick="javascript:insertext('[g]', '[/g]')" />
<input type="button" id="italic" name="italic" value="Italic" onClick="javascript:insertext('[i]', '[/i]')" />
<input type="button" id="souligné" name="souligné" value="Souligné" onClick="javascript:insertext('[s]', '[/s]')" />
<input type="button" id="lien" name="lien" value="Lien" onClick="javascript:insertext('[url]', '[/url]')" />
<br /><br />
<a href="javascript:insertext(':cadeau:','short')"><img style="border: none;" alt="cadeau" src="http://habbwired.power-heberg.com/site_admin/data/emoticons/cadeau.gif" /></a>&nbsp;
<a href="javascript:insertext(':coeur:','short')"><img style="border: none;" alt="coeur" src="http://habbwired.power-heberg.com/site_admin/data/emoticons/coeur.gif" /></a>&nbsp;
<a href="javascript:insertext(':coeur_brise:','short')"><img style="border: none;" alt="coeur_brise" src="http://habbwired.power-heberg.com/site_admin/data/emoticons/coeur_brise.gif" /></a>&nbsp;
<a href="javascript:insertext(':credits:','short')"><img style="border: none;" alt="credits" src="http://habbwired.power-heberg.com/site_admin/data/emoticons/credits.gif" /></a>&nbsp;
<a href="javascript:insertext(':ok:','short')"><img style="border: none;" alt="ok" src="http://habbwired.power-heberg.com/site_admin/data/emoticons/ok.gif" /></a>&nbsp;
<a href="javascript:insertext(':croix:','short')"><img style="border: none;" alt="croix" src="http://habbwired.power-heberg.com/site_admin/data/emoticons/croix.gif" /></a>&nbsp;
<a href="javascript:insertext(':ecotron:','short')"><img style="border: none;" alt="ecotron" src="http://habbwired.power-heberg.com/site_admin/data/emoticons/ecotron.gif" /></a>&nbsp;
<a href="javascript:insertext(':hotel:','short')"><img style="border: none;" alt="hotel" src="http://habbwired.power-heberg.com/site_admin/data/emoticons/hotel.gif" /></a>&nbsp;
<a href="javascript:insertext(':jouer:','short')"><img style="border: none;" alt="jouer" src="http://habbwired.power-heberg.com/site_admin/data/emoticons/jouer.gif" /></a>&nbsp;
<a href="javascript:insertext(':outils:','short')"><img style="border: none;" alt="outils" src="http://habbwired.power-heberg.com/site_admin/data/emoticons/outils.gif" /></a>&nbsp;
<a href="javascript:insertext(':post_it:','short')"><img style="border: none;" alt="post_it" src="http://habbwired.power-heberg.com/site_admin/data/emoticons/post_it.gif" /></a>&nbsp;
<a href="javascript:insertext(':poubelle:','short')"><img style="border: none;" alt="poubelle" src="http://habbwired.power-heberg.com/site_admin/data/emoticons/poubelle.gif" /></a>&nbsp;
</fieldset>

	<label for="description"><b><u>Description du tutoriel:</u></b></label><textarea name="description" cols="60" rows="30"></textarea><br/>
	<label for="contenu"><b><u>Turoriel:</u></b></label><textarea name="contenu" id="message" cols="60" rows="30"></textarea><br/>
	<label for="code_verification"><b><u>42+14</u> =</b> </label> <input type="text" name="code_verification" /><br/>
	<input type="submit" value="Envoyer le tutoriel">
</form>
<?php
}
else {
echo'<center><font color="red">Vous devez être connecté pour accéder à cette page !</font></center>';
}
?>
	</div>
					</div>
				<div class="bas_box_droit"></div>
	
</div>
</div>
<?php
	include('../includes/footer.php');
?>

Merci d'avance de votre aide.

Salut. As-tu lu ce tuto ?
Insertion de balises dans une zone de texte