messagerie/bbcode/previsualisation

Rang: Administrateur Nombre de messages : 346 Date d'inscription : 01/08/2004

voici un petit code en grande partie javascript qui affichera un textarea où vous pourrez taper un message, des boutons pour mettre en gras/italique/ect.. et une fonction de previsualisation de ce que vous avez ecrit.

le previsualisation peut se faire en direct.

bbcode.php

Code:: <!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" >
<head>
<title>BBCode en Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="javascript" type="text/javascript" src="prev.js"></script>
<script language="Javascript">
function bbcode(bbdebut, bbfin)
{
var input = window.document.formulaire.textarea;
input.focus();
/* pour IE (toujous un cas appar lui ;) )*/
if(typeof document.selection != 'undefined')
{
var range = document.selection.createRange();
var insText = range.text;
range.text = bbdebut + insText + bbfin;
range = document.selection.createRange();
if (insText.length == 0)
{
range.move('character', -bbfin.length);
}
else
{
range.moveStart('character', bbdebut.length + insText.length + bbfin.length);
}
range.select();
}
/* pour les navigateurs plus récents que IE comme Firefox... */
else if(typeof input.selectionStart != 'undefined')
{
var start = input.selectionStart;
var end = input.selectionEnd;
var insText = input.value.substring(start, end);
input.value = input.value.substr(0, start) + bbdebut + insText + bbfin + input.value.substr(end);
var pos;
if (insText.length == 0)
{
pos = start + bbdebut.length;
}
else
{
pos = start + bbdebut.length + insText.length + bbfin.length;
}
input.selectionStart = pos;
input.selectionEnd = pos;
}
/* pour les autres navigateurs comme Netscape... */
else
{
var pos;
var re = new RegExp('^[0-9]{0,3}$');
while(!re.test(pos))
{
pos = prompt("insertion (0.." + input.value.length + "):", "0");
}
if(pos > input.value.length)
{
pos = input.value.length;
}
var insText = prompt("Veuillez taper le texte");
input.value = input.value.substr(0, pos) + bbdebut + insText + bbfin + input.value.substr(pos);
}
}
function smilies(img)
{
window.document.formulaire.textarea.value += '' + img + '';
}
</script>
</head>
<body>
<form method="post" action="une_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)" />
<a href="#" title="Créer une citation" onClick="javascript:bbcode('[citation=AUTEUR]', '[/citation]');return(false)">Citation</a>
<img src="smileys/dents.gif" title="smile" alt="" onClick="javascript:smilies(':D');return(false)" />
<img src="smileys/content.gif" title="smile2" alt="" onClick="javascript:smilies(':)');return(false)" />
<img src="smileys/cool.gif" title="smile3" alt="" onClick="javascript:smilies('8)');return(false)" />
<img src="smileys/dormeur.gif" title="smile4" alt="" onClick="javascript:smilies(':z');return(false)" />
<img src="smileys/etonne.gif" title="smile5" alt="" onClick="javascript:smilies(':o');return(false)" />
<img src="smileys/mechant.gif" title="smile6" alt="" onClick="javascript:smilies('x(');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">C'est dans ce textarea que va s'afficher les balises BBCode.</textarea>
<br />
<input type="button" value="Prévisualiser" onClick="previsualisation();return(false)" />
<div style="border: 1px dashed #000000; padding: 0.2em; height: 200px; overflow: auto; width: 19%;" align="left" id="prev"></div>

<input type="submit" name="submit" value="Envoyer" />
</form>
</body>
</html>

prev.js

Code:: 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: 100%; 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)

// smilies Smile 
t=remplace_tag(/:D/g,'<img src="smileys/dents.gif" alt="" />',t)
t=remplace_tag(/:)/g,'<img src="smileys/content.gif" alt="" />',t)
t=remplace_tag(/8)/g,'<img src="smileys/cool.gif" alt="" />',t)
t=remplace_tag(/:z/g,'<img src="smileys/dormeur.gif" alt="" />',t)
t=remplace_tag(/:o/g,'<img src="smileys/etonne.gif" alt="" />',t)
t=remplace_tag(/x(/g,'<img src="smileys/mechant.gif" alt="" />',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');
}

» bbcode