[Javascript] incompatibilité d'un bbcode avec Internet Explorer

Version imprimable

Bonsoir à tous :) ,

J'ai un bbcode et il ne fonctionne parfaitement que sous Firefox.

Le fontionnement selon les différent navigateurs

Fonctionne correctement sous Firefox

Les balises encadrent le texte sélectionné
Le texte reste sélectionné après l'ajout d'une balise

Problème sous IE

il met les balises demandées à droite du texte sélectionné

Les codes HTML et Javascript concerné

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
<div>
        <div onclick="javascript:bbcode('[gras]', '[/gras]');return(false)"></div>
        <div onclick="javascript:bbcode('[italic]', '[/italic]');return(false)"></div>
        <div onclick="javascript:bbcode('[underline]', '[/underline]');return(false)"></div>
</div>
 
 
        <div  onclick="javascript:bbcode('[gauche]', '[/gauche]');return(false)"></div>
        <div onclick="javascript:bbcode('[centre]', '[/centre]');return(false)"></div>
        <div onclick="javascript:bbcode('[droite]', '[/droite]');return(false)"></div>
                <div onclick="javascript:bbcode('[justifie]', '[/justifie]');return(false)"></div>
</div>
 
<div>      
        <div onClick="javascript:bbcode('<a href="http://&#39;, &#39;" target="_blank">', '</a>');return(false)"></div>
        <div onclick="javascript:code();return(false)"></div>
        <div onclick="javascript:code2();return(false)"></div>
</div>
 
<select name="couleur">
<option selected="selected">Couleur</option>
        <option value="rouge" onclick="javascript:bbcode('[rouge]', '[/rouge]');return(false)">rouge</option>
        <option value="bleu" onclick="javascript:bbcode('[bleu]', '[/bleu]');return(false)">bleu</option>
</select>
 
 
<select name="taille_texte" class="taille_texte">
<option selected="selected">Taille du texte</option>
        <option value="petit" onclick="javascript:bbcode('[taille=petit]', '[/taille]');return(false)">Petit</option>
        <option value="grand" onclick="javascript:bbcode('[taille=grand]', '[/taille]');return(false)">Grand</option>
</select>

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
function bbcode(bbdebut, bbfin){
        var input = window.document.redaction_administration.textarea;
        input.focus();
        /* pour IE (toujous un cas appart lui )*/
        if(typeof document.selection != 'undefined'){
                var range = document.selection.createRange().duplicate();
                var insText = range.text;
                range.text = bbdebut + insText + bbfin;
                if(insText.length == 0) range.move('character', -bbfin);
                else{
                        range.moveStart('character', -(insText.length + bbfin.length));
                        range.moveEnd('character', -bbfin.length);
                        range.select();
                }
        }
        else if(typeof input.selectionStart != 'undefined'){
                var deb_sel = input.value.substring(0, input.selectionStart);
                var end_sel = input.value.substring(input.selectionEnd, input.value.length);
                var sel = input.value.substring(deb_sel.length, input.value.length-end_sel.length);
                input.value = deb_sel + bbdebut + sel + bbfin + end_sel;
                //Ajustement de la position du curseur
                posStart = deb_sel.length + bbdebut.length;
                posEnd = deb_sel.length + bbdebut.length + sel.length;
                if(sel.length != 0) input.setSelectionRange(posStart, posEnd);
                else input.setSelectionRange(posStart, posStart);
        }
        /* 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 smileys(img)
{
window.document.redaction_administration.textarea.value += '' + img + '';
}

Voilà merci d'avance pour votre aide ;)
NB : Je précise que je ne connais strictement rien au Javascript et que j'ai du reprendre ce code.

Dans ta condition d'IE, fais ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
var str = document.selection.createRange().text;
input.focus();
var sel = document.selection.createRange();
if(str == ""){
   sel.text = sel.text + bbdebut + bbfin;
   sel.moveStart("character", -bbfin.length);
   sel.moveEnd("character", -bbfin.length);
   sel.select();
}
else
   sel.text = bbdebut + sel.text + bbfin;
}

27/03/2007, 11h27
Invité

merci pour ta réponse très rapide...

tu veut dire que je remplace complètement ma condition IE par celle que tu m'as donné ?

(j'essaierai ce soir... là je ne peut pas :cry: )
27/03/2007, 11h31
Bisûnûrs

Citation:

Envoyé par Benoît89

tu veut dire que je remplace complètement ma condition IE par celle que tu m'as donné ?

Toutafé.

désolé, mais je n'y arrive pas : avec le code suivant, le problème reste le même fonctionne sous Firefox mais pas sous IE

je te redonne le code après la modif (ça se trouve elle est mal faite)

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
function bbcode(bbdebut, bbfin){
        var input = window.document.redaction_administration.textarea;
        input.focus();
        /* pour IE*/
        if(typeof document.selection != 'undefined'){
var str = document.selection.createRange().text; input.focus();
var sel = document.selection.createRange();
if(str == "")
{ 
 sel.text = sel.text + bbdebut + bbfin; sel.moveStart("character", -bbdebut.length); sel.moveEnd("character", -bbfin.length); sel.select(); 
}
else 
{
 sel.text = bbdebut + sel.text + bbfin; 
 }
        }
        else if(typeof input.selectionStart != 'undefined'){
                var deb_sel = input.value.substring(0, input.selectionStart);
                var end_sel = input.value.substring(input.selectionEnd, input.value.length);
                var sel = input.value.substring(deb_sel.length, input.value.length-end_sel.length);
                input.value = deb_sel + bbdebut + sel + bbfin + end_sel;
                //Ajustement de la position du curseur
                posStart = deb_sel.length + bbdebut.length;
                posEnd = deb_sel.length + bbdebut.length + sel.length;
                if(sel.length != 0) input.setSelectionRange(posStart, posEnd);
                else input.setSelectionRange(posStart, posStart);
        }
        /* 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 smileys(img)
{
window.document.redaction_administration.textarea.value += '' + img + '';
}

merci d'avance, si possible, met moi l'intégralité du code comme il faut que je le mette dans mon fichier car n'y connaisant vraiment rien je risque de faire des erreurs... :pleure:

Hello,

Personnellement j'utilise ce code qui fonctionne parfaitement :

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
function inserttag(text1,text2,champ) {
   var tag = document.getElementById(champ);
   if(document.selection){ // IE
      var str = document.selection.createRange().text;
      tag.focus();
      var sel = document.selection.createRange();
      if(text2 != ""){
         if(str == ""){
            sel.text = sel.text + text1 + text2;
            sel.moveStart("character", -text2.length);
            sel.moveEnd("character", -text2.length);
            sel.select();
         }
         else
            sel.text = text1 + sel.text + text2;
      }
      else
         sel.text = sel.text + text1;
   }
   else if(tag.selectionStart || tag.selectionStart == 0){ // Moz
      if(tag.selectionEnd > tag.value.length)
         tag.selectionEnd = tag.value.length;
 
      var firstPos = tag.selectionStart;
      var secondPos = tag.selectionEnd + text1.length;
      var contenuScrollTop = tag.scrollTop;
 
      tag.value = tag.value.slice(0,firstPos)  + text1 + tag.value.slice(firstPos);
      tag.value = tag.value.slice(0,secondPos) + text2 + tag.value.slice(secondPos);
 
      tag.selectionStart = firstPos + text1.length;
      tag.selectionEnd = secondPos;
      tag.focus();
      tag.scrollTop = contenuScrollTop;
   }
   else{ // Opera
      var sel = document.hop.contenu;
      var inst = countInstances(text1,text2);
      if(inst%2 != 0 && text2 != "")
         sel.value = sel.value + text2;
      else
         sel.value = sel.value + text1;
   }
}

Et l'appel ressemble à ça (sans les espaces dans les balises BBcode) :

Code:

1
2
3
<a href="javascript:inserttag('[B ]','[/B ]','monchamp1')">Gras</a>
 
<textarea name="monchamp1" id="monchamp1"></textarea>

28/03/2007, 13h11
Invité
ok parfait t génial ça fonctionne enfin sur IE :)

au point où j'en suis je me permet de te demander un détail

dans ma fontion pour l'ajout des smileys :
Code:

1 2 3 4 function smileys(img) { window.document.redaction_administration.textarea.value += '' + img + ''; }
voilà l'HTML qui va avec :

Code:

<img src="../images/design/bb_code/smileys/smile.png" alt="smile" class="smiley" onClick="javascript:smileys(':smile:');return(false)" />

Comment faire pour qu'une fois qu'un smiley soit ajouté (une fois qu'on a cliqué sur le smiley), on puisse taper du texte directement sans avoir a replacer le curseur dans le textarea ?
D'ailleurs cette fonction smileys bug un peu car quand j'ai tapé pas mal de texte dans mon textarea, que je positionne mon curseur au milieu de mon texte et que je clique sur un smiley pour l'ajouter, il le met systématiquement à la fin du texte et non là où j'avais mis mon curseur...

merci d'avance
28/03/2007, 13h42
Bisûnûrs

Tu peux utiliser la fonction juste au-dessus qui gère très bien s'il n'y a pas de balise fermante :

Code:

<a href="javascript:inserttag(':smile:','','monchamp1')"><img src="tonsmile" /></a>