Discussion :

[windmastr26]

Bonjour à tous,

Je suis en train de finaliser un site. Après la mise en conformité avec la validation par le w3c, je me suis attaqué au javascript.

Tout marche bien, mis à part la coloration du texte dans une iframe (éditeur wysiwyg).

Mon iframe contient une page php qui se charge d'initialiser le mode édition (designMode) et de renvoyer soit un texte par défaut, soit le text d'un post.

Le problème porte sur le bouton "changer de couleur" de la barre d'outils. Tout marche bien sous firefox, safari, opera et chrome, mais pas sous IE (étonnant non ?)...

Ma fonction :

Code :

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

1
2
3
4
5
6
7
8
9
 function changerCouleur(couleur){
  ewin.focus();
  if (IE) {
  	cible=edoc.selection.createRange();
	cible.execCommand("ForeColor", false, couleur);
  }
  else edoc.execCommand("ForeColor", false, couleur);
  document.getElementById('tblCouleurs'+editeur).style.display="none";
}

Détails de l'initalisation de "ewin" et "edoc" :

Code :

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

1
2
3
4
5
6
7
8
    if(IE){
      ewin = window.frames['editeurTxt'];
      edoc = ewin.document;
    }
    else{
      ewin = document.getElementById('editeurTxt').contentWindow;
      edoc = document.getElementById('editeurTxt').contentDocument;
    }

J'ai essayé d'initialiser "cible" avec "getSelection" également mais rien. Les autres outils (gras, italique, insérer une image, aligner, etc.) marchent bien.

Le problème c'est que "cible.type" me renvoit "null", et par conséquent, "cible.text" est vide...

C'est donc dans cette logique que, lorsque j'utilise mon outil "couleur", IE ne me colore par mon texte en rouge, mais renvoi simplement le curseur en début de document avec une font rouge (si je saisi du texte, il la couleur choisie).

Arg... Je sais pas si c'est bien clair. Mais je tourne en rond sur le net, sur google, sur divers sites et je ne trouve rien qui puisse résoudre ce problème

Une idée ? Merci dans tous les cas !

[SpaceFrog]

ce n'est pas parce que l'iframe prend le focus que "document" dans la mère va pointer sur le document de la fille ...

parent.iframe.document dans la mère pointera sur la fille

[windmastr26]

Un grand merci pour ta réponse SpaceFrog !!

Mais je n'ai pas bien compris...

Lorsque je fais :

Code :

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

1
2
ewin = window.frames['editeurTxt'];
edoc = ewin.document;

"edoc" ne porte-t-il pas justement sur la fille ? Sachant que j'exécute ma fonction depuis ma page principale ?

Car si je fais ça :

Code :

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

1
2
3
4
5
ewin.focus();
if (IE) {
  cible=edoc.selection.createRange();
  cible.pasteHTML("<FONT color='"+couleur+"'>test</FONT>");
}

Et bien IE m'insère bien "test" de la bonne couleur, mais il me l'insère au début de mon iFrame, et ce même si je sélectionne du texte...

[SpaceFrog]

certes, mais il ne faut pas donner le focus a ewin, il faut juste en recupérer la selection

[windmastr26]

Ca fait 2h que j'ai tourné la situation dans tous les sens en suivant tes conseils :

Code :

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

1
2
3
4
5
6
7
8
9
10
alert(parent.editeurTxt); //Donne "[object Window]"
alert(parent.editeurTxt.document); //Donne " [object HTMLDocument]"
 
//Jusque là tout va bien. Ensuite :
alert(parent.editeurTxt.document.selection); //Donne "[object Selection]"
//Ca ok. Mais :
alert(parent.editeurTxt.document.selection.type); //Donne "None"
alert(parent.editeurTxt.document.selection.createRange().text); //Donne ""
//Du coup, la suite ne marchera pas :
parent.editeurTxt.document.selection.createRange().execCommand("ForeColor", false, couleur); //Ne produit rien...

Désolé pour l'effet "boulet". C'est pas faute de chercher et de continuer à me documenter. Mais est-ce l'effet IE ou alors mon cerveau qui ne distingue plus l'évidence ?

Edit: Je viens de tester ce qu'ils appellent chez IE "Outils de développement", et qui est équivalent à ce qui se faisait déjà chez certains autres.
J'ai tapé la fonction suivante :

Code :

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

window.editeurTxt.document.selection.createRange().execCommand("ForeColor",false,"#FF0000")

Et bien le texte que j'avais sélectionné s'est bien coloré en rouge !! Ca n'explique pas pourquoi ça ne marche pas dans mon script (qui est tout de même situé dans la même page !), mais c'est un début. L'espoir revient...

[Bovino]

Dans ton exemple, la variable couleur a quelle valeur ?

[windmastr26]

Salut Bovino.
La variable "couleur" a une valeur hexadécimale du type "#FE546A". J'ai essayé sans le dièse mais sans différence.
Tu penses à quelque chose en particulier ?