Positionnement du curseur sous IE ( BBCODE)

Bonjour, j'ai installé sur mon site un éditeur de BBCODE pour écrire des articles.
Il fonctionne très bien sous firefox, le problème c'est sous internet explorer.
En effet quand je clique sur la balise gras par exemple.
Ca m'affiche mais le problème c'est que le curseur se positionne apres la fermeture de la balise et non entre les deux balises.

Voici mon code, si sa peut vous aidez.

PHP

<form action='ajout_article.php' method='post' onsubmit="javascript: return verification(this);">
<fieldset>
<legend>Ajouter un article</legend>
<br />
<table>
<tr>
<td> Titre :</td>
<td><input type='text' name='titre' tabindex="1"/></td>
</tr>
<tr>
<td> Droit de lecture :</td>
<td>
<select name="droit_consult" id="droit_consult" tabindex="2">
<option value=""></option> ";
<option value="invite">Invité</option>
<option value="membre">Membres</option>
<option value="admin">Admin</option>
</select>
</td>
</tr>
<tr>
<td> Droit de modification : </td>
<td>
<select name="droit_modif" id="droit_modif" tabindex="3">
<option value=""></option> ";
<option value="invite">Invité</option>
<option value="membre">Membres</option>
<option value="admin">Admin</option>
</select>
</td>
</tr>
</table>
<br />

<div class="boutons_form">
<span class="boutons">
<img src="../img/form/gras.gif" alt="Gras" title="Gras" onclick="balise('','', 'intro');parse('intro', 'prev_intro');" class="bouton_cliquable" />
<img src="../img/form/italique.gif" alt="Italique" title="Italique" onclick="balise('','', 'intro');parse('intro', 'prev_intro');" class="bouton_cliquable" />
<img src="../img/form/souligne.gif" alt="Souligné" title="Souligné" onclick="balise('','', 'intro');parse('intro', 'prev_intro');" class="bouton_cliquable" />
<img src="../img/form/barrer.gif" alt="Barré" title="Barré" onclick="balise('<barre>','</barre>', 'intro');parse('intro', 'prev_intro');" class="bouton_cliquable" />
</span>

<span class="boutons">
<img src="../img/form/liste.gif" alt="Liste à puces" title="Liste à puces" onclick="add_liste('intro','prev_intro')" class="bouton_cliquable" />
<img src="../img/form/citation.gif" alt="Citation" title="Citation" onclick="add_bal2('citation','intro','prev_intro')" class="bouton_cliquable" />
<img src="../img/form/image.gif" alt="Image" title="Image" onclick="balise('<image>','</image>', 'intro');parse('intro', 'prev_intro');" class="bouton_cliquable" />
<img src="../img/form/lien.gif" alt="Lien" title="Lien" onclick="add_bal2('lien','intro','prev_intro')" class="bouton_cliquable" />
<img src="../img/form/mail.gif" alt="E-mail" title="E-mail" onclick="add_bal2('email','intro','prev_intro')" class="bouton_cliquable" />
</span>
<br />
<span class="cleaner">

<select id="code_intro" onchange="add_bal('code','code_intro','intro','prev_intro')">
<option class="opt_titre" selected="selected">Code</option>

<option value="php">PHP</option>

<option value="html">HTML</option>
<option value="sql">SQL</option>
<option value="javascript">JAVASCRIPT</option>
<option value="actionscript">ACTIONSCRIPT</option>
<option value="c">C</option>
<option value="c++">C++</option>
<option value="vb">VB</option>
</select>

<select id="position_intro" onchange="add_bal('position','position_intro','intro','prev_intro')">
<option class="opt_titre" selected="selected">Position</option>
<option value="justifie">Justifié</option>

<option value="gauche">A gauche</option>
<option value="centrebb" class="centrebb">Centré</option>
<option value="droite" class="droite">A droite</option>
</select>

<select id="taille_intro" onchange="add_bal('taille','taille_intro','intro','prev_intro')">
<option class="opt_titre" selected="selected">Taille</option>
<option value="ttpetit">Très très petit</option>

<option value="tpetit">Très petit</option>
<option value="petit">Petit</option>
<option value="gros">Gros</option>
<option value="tgros">Très gros</option>
<option value="ttgros">Très très gros</option>
</select>


<select id="couleur_intro" onchange="add_bal('couleur','couleur_intro','intro','prev_intro')">
<option class="opt_titre" selected="selected">Couleur</option>
<option value="rose" class="rose">rose</option>
<option value="rouge" class="rouge">rouge</option>
<option value="orange" class="orange">orange</option>
<option value="jaune" class="jaune">jaune</option>

<option value="vertc" class="vertc">vert clair</option>
<option value="vertf" class="vertf">vert foncé</option>
<option value="olive" class="olive">olive</option>
<option value="turquoise" class="turquoise">turquoise</option>
<option value="bleugris" class="bleugris">bleugris</option>
<option value="bleu" class="bleu">bleu</option>

<option value="marine" class="marine">marine</option>
<option value="violet" class="violet">violet</option>
<option value="marron" class="marron">marron</option>
<option value="noir" class="noir">noir</option>
<option value="gris" class="gris">gris</option>
<option value="argent" class="argent">argent</option>

<option value="blanc" class="blanc">blanc</option>
</select>

<select id="police_intro" onchange="add_bal('police','police_intro','intro','prev_intro')">
<option class="opt_titre" selected="selected">Police</option>
<option value="arial" class="arial">arial</option>
<option value="times" class="times">times</option>

<option value="courrier" class="courrier">courrier</option>

<option value="impact" class="impact">impact</option>
<option value="geneva" class="geneva">geneva</option>
<option value="optima" class="optima">optima</option>
</select>
</span>

</div>

<div class="form">

<textarea tabindex="4"onselect="storeCaret('intro')" tabindex="30" onclick="storeCaret('intro');parse('intro', 'prev_intro')" onkeyup="storeCaret('intro');parse('intro', 'prev_intro');" name="intro" id="intro" cols="40" rows="15"></textarea>
<div id="prev_intro"></div>
</div>

<div><br />
<label for='mot_cle'>Mots clés : </label>
<input type=text size="10" maxlength="75" class="text" name="mot1" id="mot1" tabindex="5">
<input type=text size="10" maxlength="75" class="text" name="mot2" id="mot2" tabindex="6">
<input type=text size="10" maxlength="75" class="text" name="mot3" id="mot3" tabindex="7">
</div>
</fieldset>

<div class="cleaner"></div>
<div class="send">
<input type="submit" name="submit" value="valider" tabindex="50" accesskey="s" />
</div>
</form>

JAVASCRIPT

function storeCaret(id_textarea)
{
champ = document.getElementById(id_textarea);
if (champ.createTextRange)
champ.curseur = document.selection.createRange().duplicate();
}

function balise(balise_debut, balise_fin, id_textarea)
{
var champ = document.getElementById(id_textarea);
var scroll = champ.scrollTop;
if (champ.curseur)
{
champ.curseur.text = balise_debut + champ.curseur.text + balise_fin;
}
else if (champ.selectionStart != 'undefined' && champ.selectionEnd != 'undefined')
{
var debut = champ.value.substring(0, champ.selectionStart);
var entre = champ.value.substring(champ.selectionStart, champ.selectionEnd);
var fin = champ.value.substring(champ.selectionEnd);
champ.value = debut + balise_debut + entre + balise_fin + fin;
champ.focus();
champ.setSelectionRange(debut.length + balise_debut.length, champ.value.length - fin.length - balise_fin.length);
}
else
{
champ.value += balise_debut + balise_fin;
champ.focus();
}
champ.scrollTop = scroll;
}

function parse(id_textarea, id_prev)
{
var champ = document.getElementById(id_textarea);
var div_prev = document.getElementById(id_prev);
var contenu = champ.value;

if (document.body.scrollTop)
var scroll = document.body.scrollTop;
else
var scroll = window.pageYOffset;

if (champ.selectionStart != 'undefined' && !champ.curseur)
{
var pos = champ.selectionStart;
contenu = remplace(remplace(contenu.substring(0, pos),'>','>'),'<','<') + '<a href="#" name="prev_ancre_suivi" id="prev_ancre_suivi"></a>' + remplace(remplace(contenu.substring(pos),'>','>'),'<','<');
}
else
contenu = remplace(remplace(contenu,'>','>'),'<','<');

contenu = remplace(contenu, "\n", '<br />');

contenu = contenu.replace(/<code=(html|php|sql|c|c\+\+|javascript|actionscript|java|vb)>([\s\S]+?)<\/code>/g, '<span class="code">Code</span><div class="code2 $1">$2</div>');
contenu = contenu.replace(/<gras>([\s\S]+?)<\/gras>/g, '<strong>$1</strong>');
contenu = contenu.replace(/<(souligne|italique)>([\s\S]+?)<\/\1>/g, '<span class="$1">$2</span>');
contenu = contenu.replace(/<barre>([\s\S]+?)<\/barre>/g, '<strike>$1</strike>');
contenu = contenu.replace(/<couleur=(orange|noir|marron|vertf|olive|marine|violet|bleugris|argent|gris|rouge|vertc|jaune|bleu|rose|turquoise|blanc)>([\s\S]+?)<\/couleur>/g, '<span class="$1">$2</span>');
contenu = contenu.replace(/<police=(arial|times|courrier|impact|geneva|optima)>([\s\S]+?)<\/police>/g, '<span class="$1">$2</span>');
contenu = contenu.replace(/<taille=(ttpetit|tpetit|petit|gros|tgros|ttgros)>([\s\S]+?)<\/taille>/g, '<span class="$1">$2</span>');
contenu = contenu.replace(/<image>(.+?)<\/image>/g, '<img src="$1" alt="Image" />');
contenu = contenu.replace(/<position=(gauche|droite|centrebb|justifie)>([\s\S]+?)<\/position>/g, '<div class="$1">$2</div>');
contenu = contenu.replace(/<lien>(.+?)<\/lien>/g, '<a href="$1">$1</a>');
contenu = contenu.replace(/<lien=(.+?)>(.+?)<\/lien>/g, '<a href="$1">$2</a>');
contenu = contenu.replace(/<email>(.+?)<\/email>/g, '<a href="mailto:$1">$1</a>');
contenu = contenu.replace(/<email=(.+?)>(.+?)<\/email>/g, '<a href="mailto:$1">$2</a>');
contenu = contenu.replace(/<(information|attention|erreur|question)>([\s\S]+?)<\/\1>/g, '<div class="rmq $1">$2</div>');
contenu = contenu.replace(/<liste>\s*(<br \/>)?\s*([\s\S]+?)\s*(<br \/>)?\s*<\/liste>/g, '<ul>$2</ul>');
contenu = contenu.replace(/<puce>([\s\S]+?)<\/puce>\s*(<br \/>)?\s*/g, '<li>$1</li>');
contenu = contenu.replace(/<flash=(\d+)\*(\d+)>(.+?)<\/flash>/g, '<object type="application/x-shockwave-flash" data="$3" width="$1" height="$2"><param name="movie" value="$3" /><param name="quality" value="high" />Animation flash</object>');

var i = 0;
while (contenu.indexOf("<citation") != -1 && contenu.indexOf("</citation>") != -1 && (contenu.indexOf("<citation") < contenu.indexOf("</citation>")) && i < 30)
{
contenu = contenu.replace(/<citation=(.*?)>([\s\S]+?)<\/citation>/g, '<span class="citation">Citation : $1</span><div class="citation2">$2</div>');
i++;
}

contenu = remplace(contenu, ':)', '<img src="images/smilies/smile.png" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, ':D', '<img src="images/smilies/heureux.png" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, ';)', '<img src="images/smilies/clin.png" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, ':p', '<img src="images/smilies/langue.png" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, ':lol:', '<img src="images/smilies/rire.gif" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, ':euh:', '<img src="images/smilies/unsure.gif" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, ':(', '<img src="images/smilies/triste.png" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, ':o', '<img src="images/smilies/huh.png" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, ':colere:', '<img src="images/smilies/mechant.png" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, 'o_O', '<img src="images/smilies/blink.gif" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, '^^', '<img src="images/smilies/hihi.png" alt="Smiley" class="smilies" />');
contenu = remplace(contenu, ':-*', '<img src="images/smilies/siffle.png" alt="Smiley" class="smilies" />');

div_prev.innerHTML = contenu;
if (document.getElementById('prev_ancre_suivi'))
document.getElementById('prev_ancre_suivi').focus();
document.getElementById(id_textarea).focus();
}

function remplace(data, search, replace)
{
var temp = data;
var longueur = search.length;
while (temp.indexOf(search) > -1)
{
pos= temp.indexOf(search);
temp = (temp.substring(0, pos) + replace + temp.substring((pos + longueur), temp.length));
}
return temp;
}

function add_bal(nom, id_liste, id_textarea, id_prev)
{
bal = document.getElementById(id_liste).value;
balise('<'+nom+'='+bal+'>','</'+nom+'>', id_textarea);parse(id_textarea, id_prev);
document.getElementById(id_liste).options[0].selected = true;
}

function add_bal2(nom, id_textarea, id_prev)
{
var texte = '';
if (nom == 'citation')
texte = 'Veuillez renseigner l\'auteur de la citation';
else if (nom == 'lien')
texte = 'Veuillez indiquer le lien';
else if (nom == 'email')
texte = 'Veuillez indiquer l\'email';
bal = prompt(texte);
if (!bal && nom == 'citation')
bal = 'Pas de titre';
if (bal)
balise('<'+nom+'='+bal+'>','</'+nom+'>', id_textarea);parse(id_textarea, id_prev);
document.getElementById(nom).options[0].selected = true;
}

function add_liste(id_textarea, id_prev)
{
var texte = '';
while (tmp = prompt('Saisir le contenu d\'une puce (si vous voulez arreter ici, cliquez sur annuler)'))
texte += '<puce>'+tmp+'</puce>'+"\n";
balise('<liste>'+"\n"+texte,'</liste>', id_textarea);parse(id_textarea, id_prev);
}
function ouvrir_page(page,nom,x,y)
{
window.open(page,nom,'toolbar=false,personalbar=false,titlebar=false,location=false,directories=false,width='+x+',height='+y+',scrollbars=yes,resizable=yes');
}

Merci