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

Invité · 27/03/2007, 11h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**Bisûnûrs** · 27/03/2007, 11h19

Dans ta condition d'IE, fais ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

Invité · 27/03/2007, 11h27

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

)

**Bisûnûrs** · 27/03/2007, 11h31

Envoyé par Benoît89

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

Toutafé.

Invité · 27/03/2007, 19h08

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

**Bisûnûrs** · 28/03/2007, 08h53

Hello,

Personnellement j'utilise ce code qui fonctionne parfaitement :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Invité · 28/03/2007, 13h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
function smileys(img)
{
window.document.redaction_administration.textarea.value += '' + img + '';
}

voilà l'HTML qui va avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<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

**Bisûnûrs** · 28/03/2007, 13h42

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

JavaScript

Discussions similaires

Partager

Partager