[prototype] mise à jour dans un textarea bug sur IE [Résolu]

[elvan49]

Bonjour,

J'ai un souci avec IE6 et 7 que je ne ren,contre pas avec Firefox.
Contexte :
J'utilise le framework prototype.
J'ai un textarea et trois boutons de style pour agrémenter le texte : gras; italique et sousligné.
On sélectionne une portion du texte dans le textarea et on click sur un des formats voulus, ce qui a pour effet d'inclure des pseudos balises
pour gras par exemple. (classique )
J'ai une zone de prévisualisation qui se met automatiquement à jour à la frappe du texte.
Pour ça j'ai une moulinette qui transforme les pseudos balises en balises html, en passant par un champ caché.
Les infos sont récupérées via PHP dans une base mySQL...

portion de la page html/php (include bien sûr les js)

Code :

1
2
3
4
5
6
7
8
9
10
11
 
<div class="zone-edit">
    <div class="titre-txt">Texte (caract&egrave;res max : <span id="limite_texte">200</span>)</div>
     <span class="boutons">' . $btns . '</span>
     <textarea cols="30" class="t-edit" rows="8" name="texte_temp" id="texte_temp" onkeyup="identique(\'texte_temp\' , \'texte\', \'prev\')">' . htmlToArea($texte) . '</textarea>
      <input type="hidden" id="texte" name="texte" value="' . htmlspecialchars($texte) . '" />
 </div>
 <div class="zone-prev">
        <span class="titre-prev">Preview</span>
         <div id="prev">' . codeHtml(htmlspecialchars($texte)) . '</div>
  </div>

Les boutons placés par la variable $btns :

Code :

1
2
3
function afficher($textCible , $source , $cible , $preview){
        return '<input id="' . $this -> _idbtn . '" type="button" onclick="format(\''.$textCible.'\' , \''.$this -> _typeArea. '\' ,\''.$this -> _classe. '\' , \''.$source.'\' , \''.$cible.'\' ,\''.$preview.'\' );actuChampCache();" class="'.$this -> _classe. '" value="'.$this -> _label.'" />&nbsp;';
    }

je ne vous montre pas encore les autres codes car il y en a trop mais voici ce que me dit IE alors que firefox gère sans trop de souci...



Une tentative de mettre en gras, mais les autres boutons c'est pareil...
J'y comprend rien !!! Pouvez-vous m'aider ? Merci d'avance.

[elvan49]

Re,

une précision : Quand je lance mes scriopts sur firefox, il y atout de même une erreur de générer mais qui ne bloque pas le script : La voici



Si ca peut aider...

[elvan49]

Bon pour Firefox le problème semble résolu
D'une part j'avais omis .bind pour la fonction identique.
Et j'ai passé en paramètre à la fonction l'élément déclencheur pour qu'il n'y ait plus qu'un évènement 'click' et pas trois !

Code :

1
2
3
4
 
function actuChampCache(e){
    Event.observe($(e) , 'click' , identique.bind('texte_temp' , 'texte', 'prev'));    
}

Du coup, plus d'erreur sous firefox mais IE, s'il ne bloque plus ne prend pas en charge les changements de style...

à suivre...

[elvan49]

Désolé d'insister, mais je ne comprend pas ce qui empèche IE6 de prendre en charge mes boutons comme le fait Firefox.

Quelqu'un a-t'il été déjà confronté à ce problème et peut-il m'aider ?

Merci

[elvan49]

Bonjour,

(à ceux qui ont survolés ce topic)
La problème venait de méthodes javascript différentes selon IE ou Firefox.

Voici le code qui fait que le textarea se transforme bien quand on sélectionne une partie de osn texte et que l'on clic sur un bouton de formatage...

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
 
function format(id_source, baliseArea , classeHTML ,id_source, id_cible , id_preview) {
    var elt = $(id_source);
    var origine = document.forms['form_info'].id_source;
    var baliseDebut = "["+ baliseArea + "]";
    var baliseFin = "[/" + baliseArea + "]";
    //pour IE
    if(typeof document.selection != 'undefined'){
         //var str = document.selection.createRange().text;
          var sel = document.selection.createRange();
          var insText = sel.text;
          sel.text = baliseDebut + insText + baliseFin;
          if (insText.length == 0) {
              sel.move('character', -baliseFin.length);
        } else {
              sel.moveStart('character', baliseDebut.length + insText.length + baliseFin.length);
        }
    sel.select();
    }
    else {
        var sel = elt.value.substring(elt.selectionStart, elt.selectionEnd);
        var Debut = elt.value.substring( 0, elt.selectionStart );
        var Fin = elt.value.substring (elt.selectionEnd, elt.selectionEnd +1000);
        var milieu = "["+ baliseArea + "]" +  sel + "[/" + baliseArea + "]" ;
        if (milieu){
            elt.value = Debut + milieu + Fin;    
        }
        else{
            elt.value = Debut + "["+ baliseArea + "][/" + baliseArea + "]" + Fin; //nouvelle chaîne vide
        }
    } 
 
    identique(id_source , id_cible , id_preview)
}

Désolé que ma question n'est pas soulevée de réponse, mais ça arrive