Insertion texte dans textarea avec IE

Bonjour à tous,

Voilà, j'utilise cette fonction Javascript pour inclure des balises autour d'un texte sélectionné dans un textarea :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
function formatageCouleur(repdeb, repfin) 
{
    var input = document.forms['formulaire'].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;
		alert(insText);
        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 = start + repdeb.length;
        input.selectionEnd = end + repdeb.length;
    }
    /* 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);
    }
}

J'appelle cette fonction lorsque je choisis une couleur sur un div que j'ai affiché en cliquant sur un bouton. C'est pas très clair, dsl.

Voici l'étape de la démarche :

1) Je sélectionne le texte dans la textarea dont je désire changer la couleur
2) Je clique sur l'icone de mise en couleur qui appelle la fonction openColor(), qui change la valeur display de mon DIV et qui me l'affiche (sur ce div, j'ai tout un choix de couleur)
3) Je clique sur une couleur de mon choix, qui appelle la fonction choixCouleur(id), id est une valeur spécifique pour retournerla bonne couleur choisie.
4) Le DIV se ferme et le texte selectionné est entouré de la balise <font color>

Mon problème : cela fonctionne très bien sous FF, mais sous IE, ça ne me rajoute pas la balise font autour du texte selectionne.

Voir l'exemple ici

Voici le code des fonctions concernées :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
function openColor()
{
	document.getElementById("palette").style.display = "inline";
    	var myBox = document.getElementById("boxColor");
    	var posX = calculeOffsetLeft(myBox);
    	var posY = calculeOffsetTop(myBox);
    	var posXColor = posX + 40;
    	var posYColor = posY + 20;
}
 
// Gestion du choix de la couleur avec ajout de balises HTML autour de texte selectionne dans le div statique
function choixCouleur(id){
    var monId = document.getElementById(id);
    var maCouleur = monId.currentStyle || window.getComputedStyle(monId, null);
    var couleurChoisie = maCouleur.backgroundColor;
    if(couleurChoisie.length!=7)
        couleurChoisie = recupRGB(couleurChoisie);
    formatageCouleur("<font color='"+couleurChoisie+"'>","</font>");
    recupRGB(couleurChoisie);
    document.getElementById("palette").style.display = "none";
}
 
// Conversion decimal --> hexadecimal
function decToHex(dec)
{
    var hexStr = "0123456789ABCDEF";
    var low = dec % 16;
    var high = (dec - low)/16;
    hex = "" + hexStr.charAt(high) + hexStr.charAt(low);
    return hex;
}
 
// Remplacement de caractères
function replaceCharacters(conversionString,inChar,outChar)
{
    var convertedString = conversionString.split(inChar);
    convertedString = convertedString.join(outChar);
    return convertedString;
}
 
// Transformation de rgb(.,.,.) en #...... pour les couleurs
function recupRGB(rgb)
{
    var rgb = replaceCharacters(rgb,"rgb(","");
    var rgb = replaceCharacters(rgb,")","");
    var rgb = rgb.split(",");
    var r = decToHex(rgb[0]);
    var g = decToHex(rgb[1]);
    var b = decToHex(rgb[2]);
    var couleur = "#"+r+g+b;
    return couleur;
}

Merci beaucoup