[Javascript] Formulaire BBcode

[Jarodd]

Bonjour,

J'essaye de mettre en forme un formulaire en imitant le BBCode (et un peu PCI aussi ). J'avoue que je ne connais pas très bien le javascript, mais c'est avec des exercices qu'on apprend.

Ce qui m'intéresse, c'est le fait de pouvoir insérer des balises dans le textarea, mais surtout de pouvoir les insérer n'importe où selon l'endroit du curseur (et pas seulement à la fin). Voilà où j'en suis : exemple

Le problème c'est que les boutons fonctionnent farpaitement sous Fx (logique ), mais sous IE et Opera, seule la balise <br /> s'insère bien. Pour les autres, il faut d'abord taper du texte, le sélectionner et ensuite appuyer sur le bouton pour l'entourer des balises correspondantes. Mais je ne sais pas d'où le ptoblème vient... Voici le code avec le Javascript :

<script type="text/javascript">

function insertion(text1,text2) {
var ta = document.getElementById('texte');
if (document.selection) {
 var str = document.selection.createRange().text; 
 ta.focus();
 var sel = document.selection.createRange();
 if (text2!="") {
 	if (str=="") {
   var instances = countInstances(text1,text2);
   if (instances%2 != 0){ sel.text = sel.text + text2;}
   else{ sel.text = sel.text + text1;}
 	}
 	else { sel.text = text1 + sel.text + text2; }
 }
 else { sel.text = sel.text + text1; }
}
else if (ta.selectionStart || ta.selectionStart == 0) {
 if (ta.selectionEnd > ta.value.length) { ta.selectionEnd = ta.value.length; }
 var firstPos = ta.selectionStart;
 var secondPos = ta.selectionEnd+text1.length;
 var texteScrollTop = ta.scrollTop;
 ta.value=ta.value.slice(0,firstPos)+text1+ta.value.slice(firstPos);
 ta.value=ta.value.slice(0,secondPos)+text2+ta.value.slice(secondPos);
 ta.selectionStart = firstPos+text1.length;
 ta.selectionEnd = secondPos;
 ta.focus();
 ta.scrollTop = texteScrollTop;
}
else
{ // Opera
var sel = document.formulaire.texte;
 var instances = countInstances(text1,text2);
 if (instances%2 != 0 && text2 != ""){ sel.value = sel.value + text2; }
 else{ sel.value = sel.value + text1; }
}
}
</script>

<form method="post" action="form.php" name="formulaire">
<input type="button" onclick="javascript:insertion('[gras]','[/gras]',1)" value="Gras" />
<input type="button" onclick="javascript:insertion('[ital]','[/ital]',1)" value="Italique" />
<input type="button" onclick="javascript:insertion('[lien]','[/lien]',1)" value="Lien" />
<input type="button" onclick="javascript:insertion('[image]','[/image]',1)" value="Image" />
<input type="button" onclick="javascript:insertion('<br />','',1)" value="Saut de ligne" />
<br />
<textarea cols="60" rows="5" name="texte" id="texte"></textarea>
<br />
<input value="Valider" type="submit">
</form>

(C'est largement inspiré de PCI )

Merci pour votre aide.

Jarodd

[cedricpc]

Boarf, c'est pas plus mal comme réagisse Opera et IE.

Perso, je prefère presque autant comme ça.

[Jarodd]

Oui mais moi je préfère pas...

[cedricpc]

C'est toi qui vois.

Bon moi je peux pas trop t'aider sinon, désolé.

[Jarodd]

[vodnok]

En prenant une autre source genre phpBB ou IPB?

[cedricpc]

En prenant une autre source genre phpBB ou IPB?

Bah c'est surement celle la qu'il a pris comme méthode.

[Jarodd]

J'ai d'abord essayé PhpBB mais les balises s'ajoutent toujours à la fin et pas à l'emplacement du curseur. Ensuite j'ai pris le modèle de PCI (le formulaire pour proposer une news), c'est nickel sous Fx mais pas totalement sous IE et Opera.

IPB je ne connais pas, je n'ai pas essayé.

[Matmout]

IPB c'est le forum ici-même où tu viens de poster :)

Essaye de voir les sources, mais perso sous firefox il me met tout à la fin...

Essaye de voir vBulletin (en gros essaye de voir sur tous les forums que tu trouves, il y a forcément la solution quelque part).

[Jarodd]

Ah ok je viens d'apprendre quelque chose

C'est effectivement un problème du navigateur et non du code, vu qu'avec le même navigateur tu n'obtiens pas pareil que moi. Ca ne m'étonnerait qu'à moitié d'IE, mais ça m'embête plus pour Opera...