Probleme:event sur une iframe sous FF qd y a un designMode

allen.shezar · Message par **allen.shezar** » 09 mai 2006, 19:04

Bonjour,
Je cherche a créé un Wysiwyg et j'aimerai savoir s'il est possible dans mon iframe qui est ma zone de texte, de détecter à chaque emplacement de la barre de texte, la police, la couleur, la taille, si on est en gras, en italique ou en souligné.

Je cherche a le savoir pour pouvoir mettre les boutons de ma toolbar dans la position appoprié a chaque emplacement de la zone de texte. (comportement de Microsoft Word en gros).

D'autre part j'arrive a mettre en italique, en gras, etc... mon texte mais uniquement sur FF.
Je cherche a le faire aussi avec IE. Ce qui est marrant c'est que j'utilise execCommand, une commande du msdn qui à la base a été faite par Microsoft! Marrant non?

Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

martin · Message par **martin** » 10 mai 2006, 20:09

allen.shezar a écrit :Je cherche a créé un Wysiwyg et j'aimerai savoir s'il est possible dans mon iframe qui est ma zone de texte, de détecter à chaque emplacement de la barre de texte, la police, la couleur, la taille, si on est en gras, en italique ou en souligné.

C'est chaud...
prenons le cas "gras".
Le curseur peut être dans un noeud <strong>, ou dans un noeud <b>, ou dans n'importe quel noeud avec un style css font-weight:bold. Il faut donc tester si il y a noeud parent strong ou b, et regarder la propriété getComputedStyle pour retrouver le style appliqué actuellement.

et ainsi de suite pour les autres caractéristiques.

allen.shezar · Message par **allen.shezar** » 10 mai 2006, 21:56

Merci martin pour ta réponse, si toi tu me dis que c'est chaud je pense que je vais réfléchir avant de me lancer dans cette galère.

Sinon j'arrive toujours pas a appliquer le style sur IE...

J'ai aussi une nouvelle question? Qqn sait comment mettre des events correctement sur une iframe? Sur mon application ca ne marche pas, j'ai donc fait une page test que voici :

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <style>
      html, body {background-color:#ffffff;}
    </style>    
    <script language = "Javascript">
    
    function init()
    {
    var iframe                    = document.createElement("iframe");
    iframe.id                     = "iframe";
    iframe.style.position         = "absolute";
    iframe.style.display          = "none";
    iframe.style.width            = 500 + "px";
    iframe.style.height           = 300 + "px";
    iframe.style.top              = 20  + "px";
    iframe.style.left             = 20  + "px";
    iframe.style.border           = "1px solid black";
    iframe.src                    = "iframe.htm";
    iframe.marginwidth            = "0 px";
    iframe.marginheight           = "0 px";
    iframe.style.overflow         = "auto";
    iframe.style.display = "block";
    document.body.appendChild(iframe);
    getWindow().document.onclick = OnClick;
    }
    
    function getWindow()
    {
	    return document.getElementById("iframe").contentWindow;
    }
    
     function OnClick()
    {
      alert("ça m'enerve !!!");
    }
    
    window.onload = init;
    
    </script>
  </head>
  <body>
  </body>
</html>

Mon iframe y a juste ca :

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
  <head>
    <style>
      html, body {background-color:#ffffff;}
    </style>
  </head>
  <body>
  </body>
</html>

Ca marche nikel sur IE mais ca fonctionne pas sur FF!

Qqn saurait il pourquoi?

Merci d'avance!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

martin · Message par **martin** » 10 mai 2006, 22:23

allen.shezar a écrit :Merci martin pour ta réponse, si toi tu me dis que c'est chaud je pense que je vais réfléchir avant de me lancer dans cette galère.

En même temps faut essayer

, disons que c'est peut être pas le moment, fait déjà fonctionner l'essentiel, tu pourras toujours essayé de le rajouter ensuite...

allen.shezar a écrit :Qqn sait comment mettre des events correctement sur une iframe? Sur mon application ca ne marche pas, ...

lis le passage 'Event Handling Disabled' dans :
http://developer.mozilla.org/en/docs/Ri ... in_Mozilla

en même temps j'avais implémenté des raccourcis clavier dans un éditeur wysiwyg, en interceptant donc les event clavier. Je sais plus comment. Je regarderai demain et t'en dirai un mot...

martin · Message par **martin** » 11 mai 2006, 13:18

Bon donc, ta fonction OnClick.
Je ne pense pas que tu puisse appliqué un évènement onclick sur un object document. Il faut l'appliquer à l'objet window plutôt.
Ensuite tu ne peux pas l'appliquer tant que l'iframe n'est pas finie d'être chargée.
Donc, remplace :

Code : Tout sélectionner

getWindow().document.onclick = OnClick;

par :

Code : Tout sélectionner

iframe.onload = function() {
  getWindow().onclick = OnClick;
}

Cependant comme ton iframe va être éditable, il faudra peut être faire attention à ne pas écraser le onclick natif, mais ajouter des actions.
Et donc plutôt que d'affecter directement la propriété onclick, passer par addEventListener, pour les navigateurs standards, ou attachEvent pour IE.

Pour gecko çà donne :

Code : Tout sélectionner

iframe.onload = function() {
  getWindow().addEventListener('click', OnClick, false);
}

allen.shezar · Message par **allen.shezar** » 11 mai 2006, 17:38

Merci Martin pr ton aide! Ce qui est marrant c'est qu'en faisant ce que tu m'as dit ca me le fait tourner sur FF mais plus sur IE mais bon...
J'ai trouvé une solution, mais est-ce la meilleure?

Code : Tout sélectionner

function init()
    {   var isIE = typeof document.all != 'undefined' && typeof document.getElementById != 'undefined' && typeof window.opera == 'undefined';
        var iframe                    = document.createElement("iframe");
        iframe.id                     = "iframe";
        iframe.style.position         = "absolute";
        iframe.style.display          = "none";
        iframe.style.width            = 500 + "px";
        iframe.style.height           = 300 + "px";
        iframe.style.top              = 20  + "px";
        iframe.style.left             = 20  + "px";
        iframe.style.border           = "1px solid black";
        iframe.src                    = "iframe.htm";
        iframe.marginwidth            = "0 px";
        iframe.marginheight           = "0 px";
        iframe.style.overflow         = "auto";
        iframe.style.display = "block";
        document.body.appendChild(iframe);
        if(isIE)
        {            
            getWindow().document.onclick = OnClick;
        }    
        else
        {
            iframe.onload = function()
            {
               getWindow().onclick = OnClick;
            } 
        }    
    }

Ce que j'ai pu comprendre en testant c'est que: d'une part, FF doit avoir son iframe de charger, IE s'en fout. D'autre part, il est possible d'accrocher l'event sur document ou window sous FF mais pas sur IE(que sur le document). Troisièmement IE n'aime pas iframe.onload...vas savoir pourquoi! Voila! sinon j'ai pas bien compris l'article dont tu m'as donné le lien. Je vais pas pouvoir mettre d'event si g mon designMode? du moins sur FF il veut pas qd je mets le designMode. Peux tu regarder ce que ca donne en mettant un onmouseover au lieu d'un onclick? Bizarre le comportement que ca donne sur FF. C'est un probleme de vitesse d'execution du code?!?

Re:pour rire!
Essaie de mettre un designMode sans les events d'abord! Magie, ca marche plus qu'avec IE! Alors que je reprends la fonction iniEditor qui fonctionner avec les deux sous mon application! c'est celle qui est sur ce topic:
http://geckozone.org/forum/viewtopic.php?t=38712
De toute facon tu la connais vu que c'est toi qui m'avais donné la réponse!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

allen.shezar · Message par **allen.shezar** » 12 mai 2006, 17:32

J'ai résolu le pb, fallait juste mettre aussi un onload pr le designMode. Facile ça! mais j'arrive pas a mettre d'event qd je switch le designMode à "On".
Pourtant j'ai fait ce que tu m'as dit!

Code : Tout sélectionner

if(isIE)
       {            
          iniEditor();
       }    
       else
       {
          iframe.addEventListener("load", iniEditor, false);
          //iframe.onload = iniEditor;
       }
       if(isIE)
       {            
          getWindow().document.onmouseover = OnClick;
       }    
       else
       {
          iframe.addEventListener("load",OnClickTrigger,false);
          /*iframe.onload = function()
          {
             getWindow().document.onmouseover = OnClick;
          } */
       }    
    }

Ca serait qd meme pas définitif le fait que l'on peut pas mettre d'event sur une iframe qd le designMode est a "On"? C'est bien ce que dit l'article dont tu m'as donné le lien, martin?
Tu pourrais me donner stp martin la solution que tu avais utiliser dans ton editeur wysiwyg ou qqn d'autre s'il a la solution ^^ . Merci d'avance.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

calimo · Message par **calimo** » 12 mai 2006, 19:25

Bon, déjà le if(isIE), tu oublies !

Tu n'es pas sûr qu'un non-IE n'essayera pas de se faire passer pour IE (et je te garantis qu'il y en a)
Tu pourrais rater certains IE

Teste plutôt les méthodes fonctions directement (exemple : document.all si tu veux utiliser document.all, ici tu peux tester iframe.addEventListener ou peut-être même iniEditor (avec if(iniEditor))

allen.shezar · Message par **allen.shezar** » 12 mai 2006, 20:27

Raté certain IE? dans tous les cas mon probleme est sur FF et pas sur IE mais bon g changé et je teste maintenant les methodes que j'appelle.Mais ca ne change rien. Le truc c que le designMode et les events fonctionne indépendament mais pas ensemble (sur FF)! Je comprends pas ce que tu veux dire par non-IE calimo. Moi je c sur koi je visualise! FF et IE ^^.
Je pense que pr les events il faudrait mettre le design mode qu'après que l'évènement (click&&focus) ai été trigger, et l'enlever que lorsque on a l'event blur le truc c que dans ce cas la l'event est trigger avant que le designMode soit a off. C'est un vrai casse tete! Si qqn a une solution, qu'il se fasse connaitre. Chui au bord de la depression.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.3) Gecko/20060426 Firefox/1.5.0.3

martin · Message par **martin** » 13 mai 2006, 15:44

allen.shezar a écrit : Tu pourrais me donner stp martin la solution que tu avais utiliser dans ton editeur wysiwyg ou qqn d'autre s'il a la solution ^^ . Merci d'avance.

sorti à la va-vite de mon code, c'était quelque chose du genre :

Code : Tout sélectionner

function initEvent() {
	if (!iframeWindow.document){
		setTimeout(initEvent, 1);
		return;
	}
	iframeWindow.document.addEventListener(
		"keypress",
		myFunctionKeyPress,
		true
	);
}

initEvent() est lancé aprés avoir mis le designMode à 'on', et çà lance la méthode myFunctionKeyPress() sur les événements onkeypress.

il n'y avait aucun problème à attacher des événements à l'objet document sous IE (même si le cas n'est traité dans mon exemple).
Bon courage

Geckozone

Probleme:event sur une iframe sous FF qd y a un designMode

Probleme:event sur une iframe sous FF qd y a un designMode

Re: Mise en place et détection des propriétés du style da

Qui est en ligne ?