wysiwyg inserer du texte directement dans iframe

Bonjour a tous,
je suis en train de faire un wysiwyg moins evoluer que javascriptfr.
Les principaux utilisateurs qui vont utiliser le WYSIWYG sont sur ie et firefox.

Techniquement :
J'utilise un iframe avec designmode='on', pour ce qui est des execcommande, pas de probleme pour faire le gras, italique, souligne et tous les justtifié.

Maintenant mon probleme:
je voudrais que le comportement sous ie et firefox soit identique, c'est à dire que quand j'appuie sur ma touche entrée, j'ai toujours "<br>" quelque soit le navigateur, au lieu de <p>&nbsp;</p> sous ie.

J'ai essayé d'attaché un evenement onkeypress pour detecter la touche entrée sous ie et d'inserer <br> au lieu de <p>&nbsp;</p>, mais sans résultat :
frames["test"].document.attachEvent("onkeypress", function evt_ie_keypress(event) { setTimeout("javascript:retChariot();" , 1); });
Le code ci dessus  n'est pas de moi

Première question :
comment fait on pour inserer du texte directement dans le code de la iframe ?

Deuxieme question :
comment fait on pour attacher un evenement à la iframe ?

Quelqu'un pourrait il me dire ce qui ne va pas ou me donner d'autres pistes ???
Merci

tu as du assigner un id à ton iframe...
à un moment, tu as iframe=document.getElementById...

pour insèrer du texte :
iframe.innerHTML+='mon texte';

In a dream, I saw me, drop dead... U was here, U cried... It was just a deam, if I die, U won't cry, maybe, U'll be happy

[ Lien ]

Merci pour ta réponse,
je crois que c'est ce que j'ai fait, mais l'évènement ne m'est pas retourné, pourquoi ??
Voici mon code :
Tout est dans un fichier js
mon iframe a pour id= "saisie" et mon textearea id="txt"


var Champ,tmp, Fen;

//———————————————————————————————————————————————————
function btn1(bou)    //—— bouton sans paramètre ——
//———————————————————————————————————————————————————
{   
    Fen.focus();   
    Champ.execCommand(bou.name,false,null);      
}

//———————————————————————————————————————————————————
function addImg(bou)    //
//———————————————————————————————————————————————————
{   
    Fen.focus();
    Champ.execCommand('insertImage',false,bou.src);  

}
//———————————————————————————————————————————————————
function addLink(lien)    //
//———————————————————————————————————————————————————
{
    Champ.body.innerHTML = Champ.body.innerHTML+lien;
}
//———————————————————————————————————————————————————————————————————
function maj()    //—— maj iframe ou textarea avant envoi formulaire ——
//———————————————————————————————————————————————————————————————————
{     var tmp=document.getElementById("txt");
    if (tmp.style.display=="none")
    {    
        tmp.value=Champ.body.innerHTML;    
    }
    else    
    { 
        Champ.body.innerHTML=tmp.value;     
    }
      frm.submit();
}

//———————————————————————————————————————————————————————————————————
function retChariot()    //—— pour ie retour chariot devient br au lieu de p ——
//———————————————————————————————————————————————————————————————————
{
        Champ.body.innerHTML ="BOUH";
}
//——————————————————————————————————————————————————
function voir(btn)    //—— bascule html/Editeur ——
//——————————————————————————————————————————————————
{     var tmp=document.getElementById("txt");
    if (tmp.style.display=="none")
        {     tmp.style.display="inline";
            btn.title="Revoir la page";
            tmp.value=Champ.body.innerHTML; }
    else     {     tmp.style.display="none";
            btn.title="Voir le Code HTML";
            Champ.body.innerHTML=tmp.value;  }  }
//————————————————————————————————————————————
function initWysiwyg()    //—— Initialisation ——
//————————————————————————————————————————————
{
    switch (navigator.appName)   
    {
        //     ===========================
        case     "Microsoft Internet Explorer":
        //     ===========================
            Fen=window.frames['Saisie'];
            Champ=Fen.document;           
            frames["Saisie"].document.attachEvent("onkeypress", function evt_ie_keypress(event){ setTimeout("javascript:retChariot();" , 1); });
            break;
        //       =====
        default:// sinon
        //       =====
            Champ=document.getElementById('Saisie').contentDocument;
            Fen=document.getElementById('Saisie').contentWindow;
            //document.getElementById("Saisie").contentWindow.document.addEventListener("keypress", function Gecko_Key_Press () { setTimeout("javascript:retChariot();" , 1); }, true);
            break;
    }
    Champ.designMode='On';
    Champ.execCommand('FontName', false,'comic sans ms');
    Champ.execCommand("FontSize", false,2);
    Fen.focus();   
}

t'as fait un vulgaire copier coller du code de bultez...

t'as changé que quelques noms...

un extrait du mien :

texte=document.getElementById("iframe").contentDocument;

texte.body.innerHTML=texte.body.innerHTML+"<a href=\""+prompt("url","http://")+"\" target=\"_blank\">"+prompt("texte","mon lien")+"</a>";

In a dream, I saw me, drop dead... U was here, U cried... It was just a deam, if I die, U won't cry, maybe, U'll be happy

[ Lien ]

Merci pour ton aide coucou747,
est ce que c'est mal de réutiliser le code des personnes qui le mette à disposition, tu as du t'en inpirer ?

Toujours est il que si tu connais le code de bultez, la gestion des évènements sur les touches pressées n'est pas pris en charge, et comme je l'expliquais plus haut, j'ai besoin d'avoir un keylistener, pour faire une action à chaque fois qu'on appuie sur la touche entrée, je veux inserer dans la iframe un retour à la ligne <br> et non pas <p>&nbsp;</p> pour internet explorer.

Si tu as une piste de ce côté, je suis preneur.

Une petite précision, je débute en javascript, donc, je ne connais pas encore toutes les subtilités de class qu'il contient, dès que mes petites fonctions seront parfaites, je ferais carrement une class wysiwyg.

Merci à plus

je n'ai pas dit que c'était mal, mais pour nous éclairer, plutot que de poster ton code, tu aurais pu simplement dire qu'il ofnctionnait comme celui de bultezn, puisque c'est ta base...
Tu pourrais faire réponse accèptée pour la personne qui t'aide... ça serait plus corect...

Je me suis efectivement inspiré de son code, mais j'en ai changé toute la façon de programmer : je n'ai pas fait de textarea, j'ai fait un cadre en php pour détecter si le navigateur suportait ou non les éditeurs wysiwyg, j'ai ensuite fait un moteur de BBcode pour le cas ou un navigateur ne le suporterais pas... j'ai ensuite essayé de mettre des couleurs sur les actions en cours....

pour ton problème, autant ne pas vérifier les touches, mais faire un replace dans le contenu de l'iframe...

In a dream, I saw me, drop dead... U was here, U cried... It was just a deam, if I die, U won't cry, maybe, U'll be happy

[ Lien ]

Merci pour ta réponse coucou747,

J'ai mis reponse accepté, parce que j'ai trouvé d'ou venait mon problème au niveau du listener d'evenement (attachEvent pour ie), en fait il faut déclarer le designMode='on' avant d'attacher ton evenement.
Donc le probleme pour detecter l'evenement est résolue.

J'ai bien pris en compte ta réponse, mais au niveau de l'utilisateur, je préférer qu'il voit un retour à la ligne au lieu d'un saut de ligne.
Donc je suis toujours dans l'optique de detecter l'appuie sur la touche entree.

Maintenant un autre probleme intervient lorsque je veux detecter particulièrement "l'evenement touche entrée enfoncé dans mon champ iframe le code" ci dessous genere une erreur pour la fonction keyPress:

Y'a-t-il une gestion d'evènement particulier pour les iframes ???

En tout cas merci pour tes réponses rapides.



var Champ,tmp, Fen,navigateur;

//———————————————————————————————————————————————————
function btn1(bou)    //—— bouton sans paramètre ——
//———————————————————————————————————————————————————
{   
    Fen.focus();   
    Champ.execCommand(bou.name,false,null);      
}

//———————————————————————————————————————————————————
function addImg(bou)    //
//———————————————————————————————————————————————————
{   
    Fen.focus();
    Champ.execCommand('insertImage',false,bou.src);  

}
//———————————————————————————————————————————————————
function addLink(lien)    //
//———————————————————————————————————————————————————
{
    Champ.body.innerHTML=
    Champ.body.innerHTML+"<a href=\""+prompt("URL : exple http://crazybonzai.free.fr","")+"\" target=\"_blank\">"+prompt("texte commentaire du lien","lien")+"</a>";
}
//———————————————————————————————————————————————————————————————————
function maj()    //—— maj iframe ou textarea avant envoi formulaire ——
//———————————————————————————————————————————————————————————————————
{     var tmp=document.getElementById("txt");
    if (tmp.style.display=="none")
    {    
        tmp.value=Champ.body.innerHTML;    
    }
    else    
    { 
        Champ.body.innerHTML=tmp.value;     
    }
      frm.submit();
}

//———————————————————————————————————————————————————————————————————
function keyPress()    //—— pour ie retour chariot devient br au lieu de p ——
//———————————————————————————————————————————————————————————————————
{    if(navigateur=="Microsoft Internet Explorer")
    {
        if(event.keyCode==13) // c est quand je veux detecter LA touche enfonce
                                   // j ai aussi essaye avec window.event.keyCode
            Champ.body.innerHTML ='coucou';
    }
}
//——————————————————————————————————————————————————
function voir(btn)    //—— bascule html/Editeur ——
//——————————————————————————————————————————————————
{     var tmp=document.getElementById("txt");
    if (tmp.style.display=="none")
        {     tmp.style.display="inline";
            btn.title="Revoir la page";
            tmp.value=Champ.body.innerHTML; }
    else     {     tmp.style.display="none";
            btn.title="Voir le Code HTML";
            Champ.body.innerHTML=tmp.value;  }  }
//————————————————————————————————————————————
function initWysiwyg()    //—— Initialisation ——
//————————————————————————————————————————————
{
    navigateur=navigator.appName;
    switch (navigator.appName)   
    {
        //     ===========================
        case     "Microsoft Internet Explorer":
        //     ===========================
            Fen=window.frames['Saisie'];
            Champ=Fen.document;       
             Champ.designMode='On';
             // ATTENTION pour attacher un evenement a l iframe, il faut declarer design mode on avant
          Champ.attachEvent("onkeypress", function evt_ie_keypress(event) { setTimeout("javascript:keyPress();" , 1); });
           
            break;
        //       =====
        default:// sinon
        //       =====
            Champ=document.getElementById('Saisie').contentDocument;
            Champ.designMode='On';
            Fen=document.getElementById('Saisie').contentWindow;
            document.getElementById("Saisie").contentWindow.document.addEventListener("keypress", function Gecko_Key_Press () { setTimeout("javascript:keyPress();" , 1); }, true);
            break;
    }
    Champ.execCommand('FontName', false,'comic sans ms');
    Champ.execCommand("FontSize", false,2);
    Fen.focus();   
}

OK j'ai résolue le probleme pour la gestion d'evenement,
mais mon problème pour les retours à la ligne subsistent toujours.

Je m'explique, lorsque je remplace dans mon iframe
Champ.body.innerHTML=Champ.body.innerHTML.replace(/<P>&nbsp;<\/P>/i,"");
et que je regarde l'affichage en innerHTML, j'obtient <P><br>&nbsp;</P>, j'en ai marre !! Y'a 'il un moyen de desactiver le mode paragraphe pour une iframe dans ie ???
Ce que je voudrais, c'est un retour à la ligne comme quand on fait shift + entree dans les wysiwyg, mais sans le shift, c'est possible, ils le font sur ce forum !! D'ailleurs, comment ils font ??

En tout les cas :