<form method="post" action="un_page.html" name="formulaire">
<input type="button" id="gras" name="gras" value="Gras" onClick="javascript:bbcode('[gras]', '[/gras]');return(false)" />
<input type="button" id="italic" name="italic" value="Italic" onClick="javascript:bbcode('[italic]', '[/italic]');return(false)" />
<input type="button" id="image" name="image" value="Image" onClick="javascript:bbcode('[image]', '[/image]');return(false)" />
<input type="button" id="lien" name="lien" value="Lien" onClick="javascript:bbcode('[url=]', '[/url]');return(false)" />
<input type="button" id="citation" name="citation" value="Citation" onClick="javascript:bbcode('[citation=AUTEUR]', '[/citation]');return(false)" />
<input type="button" id="lien" name="barré" value="Barré" onClick="javascript:bbcode('[barré]', '[/barré]');return(false)" />


<select name="couleur">
   <option id="bleu" name="bleu" value="Bleu" class="bleu" onclick="javascript:bbcode('[color=blue]', '[/color]')">Bleu</option>
  <option value="Rouge" class="rouge" onclick="javascript:bbcode('[color=red]', '[/color]')">Rouge</option>
  <option value="Vert" class="vert" onclick="javascript:bbcode('[color=green]', '[/color]')">Vert</option>
  <option value="Argent" class="argent" onclick="javascript:bbcode('[color=silver]', '[/color]')">Argent</option>
  <option value="Jaune" class="jaune" onclick="javascript:bbcode('[color=yellow]', '[/color]')">Jaune</option>
  <option value="Fushia" class="fushia" onclick="javascript:bbcode('[color=fuchsia]', '[/color]')">Fushia</option>
  <option value="Violet" class="violet" onclick="javascript:bbcode('[color=purple]', '[/color]')">Violet</option>
  <option value="Olive" class="olive" onclick="javascript:bbcode('[color=olive]', '[/color]')">Olive</option>
  <option value="Azur" class="azur" onclick="javascript:bbcode('[color=aqua]', '[/color]')">Azur</option>
  <option value="r_fonce" class="r_fonce" onclick="javascript:bbcode('[color=maroon]', '[/color]')">Rouge foncé</option>
  <option value="v_fluo" class="v_fluo" onclick="javascript:bbcode('[color=lime]', '[/color]')">Vert fluo</option>

</select>


<img src="http://siteduzero.com/Templates/images/smilies/smile.png" title="" alt="" onClick="javascript:smilies(':D');return(false)" />
<br />
<input name="auto" id="auto" type="checkbox" onClick="automatique()" /> <label for="auto">Prévisualisation automatique</label>
<br />
<textarea cols=35 rows=10 id="textarea" name="textarea">texte du textarea.</textarea>
<br />
<input type="button" value="Prévisualiser" onClick="previsualisation();return(false)" />
<div id="prev"></div>
<input type="submit" name="submit" value="Envoyer" />
</form>

var timer=0;
var ptag=String.fromCharCode(5,6,7);
function  previsualisation() {
t=document.formulaire.textarea.value 
t=code_to_html(t)
if (document.getElementById) document.getElementById("prev").innerHTML=t
if (document.formulaire.auto.checked) timer=setTimeout(previsualisation,1)

}
function automatique() {
if (document.formulaire.auto.checked) previsualisation()
}
function code_to_html(t) {
t=nl2khol(t)
//balise Gras
t=deblaie(/(\[\/gras\])/g,t)
t=remplace_tag(/\[gras\](.+)\[\/gras\]/g,'<span style="font-weight: bold;">$1</span>',t) 
t=remblaie(t)

// balise Italic
t=deblaie(/(\[\/italic\])/g,t)
t=remplace_tag(/\[italic\](.+)\[\/italic\]/g,'<span style="font-style: italic;">$1</span>',t) 
t=remblaie(t)

// balise Citation
t=deblaie(/(\[\/citation\])/g,t)
t=remplace_tag(/\[citation=([\s\S]*?)\](.+)\[\/citation\]/g,'<strong>Citation $1 :</strong><div style="border: 1px solid #000000; width: 50%; font-family: Verdana, \'Trebuchet MS\', Tahoma, \'Times New Roman\', Times, serif; text-align: left; font-size: 11px;" align="center">$2</div>',t) 
t=remblaie(t)

// balise Image
t=deblaie(/(\[\/image\])/g,t)
t=remplace_tag(/\[image\](.+)\[\/image\]/g,'<img src="$1" />',t)
t=remblaie(t)

// balise URL   
t=deblaie(/(\[\/url\])/g,t)
t=remplace_tag(/\[\url=([\s\S]*?)\](.+)\[\/url\]/g,'<a href="$1" target="_blank">$2</a>',t)
t=remblaie(t)

//balise Barré
t=deblaie(/(\[\/barré\])/g,t)
t=remplace_tag(/\[barré\](.+)\[\/barré\]/g,'<span style="text-decoration: line-through;">$1</span>',t) 
t=remblaie(t)

//balise couleur
t=deblaie(/(\[\/color\])/g,t)
t=remplace_tag(/\[color=([\#\w]*?)\](.+)\[\/color\]/g,'<span style="color:$1">$2</span>', t);

//smiley
t=remplace_tag(/:D/g,'<img src="http://siteduzero.com/Templates/images/smilies/smile.png" alt="" />',t) 
t=remblaie(t)
t=unkhol(t)
t=nl2br(t)
return t
}
function deblaie(reg,t) {
textarea=new String(t);
return textarea.replace(reg,'$1\n');
}
function remblaie(t) {
textarea=new String(t);
return textarea.replace(/\n/g,'');
}
function remplace_tag(reg,rep,t) {
textarea=new String(t);
return textarea.replace(reg,rep);
}
function nl2br(t) {
textarea=new String(t);
return textarea.replace(/\n/g,'<br/>');
}
function nl2khol(t) {
textarea=new String(t);
return textarea.replace(/\n/g,ptag);
}
function unkhol(t) {
textarea=new String(t);
return textarea.replace(new RegExp(ptag,'g'),'\n');
}