[Résolu]Problème édition dans iframe en JS

allen.shezar · Message par **allen.shezar** » 10 avr. 2006, 20:24

Bonjour à tous!
J'espère que la réponse n'est pas déja sur le forum... j'ai cherché mais pas trouvé.

Je veux faire une boite de message un peu à la outlook et exclusivement en Javascript. Ca aura en gros cette tête :

J'ai choisi de mettre pour la zone de texte du bas une iframe et non une textarea. Celle-ci est dans un div qui contient la couleur grise comme couleur de fond.
Le probleme c'est qu'en voulant rendre l'iframe éditable avec la fonction designMode de Javascript je rends ma frame grise à son tour.
Je mets la ligne en commentaire et poum ca redeviens blanc comme je le souhaite. Si vous connaissez une option de designMode ou un moyen de chuinter le probleme...

PS : ca le fait sur Firefox 1.0.6 et pas sur MSIE, j'aimerai une compatibilité avec le maximum de version de Mozilla.

Merci d'avance...

Pour ce que ça aide voila mon code :

var isIE = typeof document.all != "undefined" && typeof document.getElementById != "undefined" && typeof window.opera == "undefined";

var isMozilla = typeof document.all == "undefined" && typeof document.getElementById != "undefined" && typeof window.opera == "undefined";

var msg_para = document.createElement("div");
msg_para.id="msg_para";
msg_para.style.position="absolute";
msg_para.style.top="36px";
msg_para.style.left="10px";
msg_para.style.width="450px";
msg_para.style.height="500px";
msg_para.style.border="1px solid black";
msg_para.style.backgroundColor="#d0d4c0";
msg_para.style.fontFamily="Arial";
msg_para.style.fontSize="8pt";
document.body.appendChild(msg_para);

var msg_text = document.createElement("div");
msg_text.id="msg_text";
msg_text.style.position="absolute";
msg_text.style.width="450px";
msg_text.style.height="400px";
msg_text.style.top="100px";
msg_text.style.left="0px";
msg_para.appendChild(msg_text);

var msg_textarea = document.createElement("iframe");
msg_textarea.id="msg_textarea";
msg_textarea.style.position="absolute";
msg_textarea.style.top="10px";
msg_textarea.style.left="10px";
msg_textarea.style.border="1px solid black";
msg_textarea.style.width="430px";
msg_textarea.style.height="380px";
msg_textarea.src="iframe.htm";
msg_textarea.rows="22";
msg_textarea.cols="50";
msg_textarea.wrap="virtual";
msg_text.appendChild(msg_textarea);

window.document.body.onload=iniEditor();

function iniEditor()
{
if(isIE)//pour IE
{
var doc = window.frames['msg_textarea'].document;
doc.designMode = 'On';
}
else if (isMozilla) //pour Mozilla Firefox
{
var doc =document.getElementById('msg_textarea').contentDocument;
doc.designMode = 'On';
}
else
alert("Nous vous conseillons d'installer une des dernières versions de Mozilla Firefox ou d'Internet Explorer.");
}

Merci encore

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.10) Gecko/20050716 Firefox/1.0.6

Message par **Benoit** » 10 avr. 2006, 21:43

Pas simplement

Code : Tout sélectionner

msg_textarea.style.backgroundColor="#fff";

?

(c'est un peu bizarre d'appeler un iframe textarea mais bon)

Par ailleurs il me semble que tu pourrais améliorer ton code en remplaçant la détection de navigateur par une détection d'objet pour que ça fonctionne dans Safari et/ou Opera si/quand ils implémentent designmode

martin · Message par **martin** » 10 avr. 2006, 21:45

Tu crois voir ton iframe en gris parce qu'elle ne doit pas être créée (c'est toi même qui dit que le div conteneur a un fond gris).

Je te conseille de créer tes éléments dans ta fonction iniEditor(), en tout cas aprés l'événement onload de ta page.
L'équilibre a trouver entre les créations d'éléments, les initialisations de designMode, et autre, peut être délicat à trouver entre les différents navigateurs.

Pendant que j'y suis, met à jour ton firefox, la version 1.0.6 commence à dater (et quelques variations peuvent d'ailleurs survenir sur ce sujet).

allen.shezar · Message par **allen.shezar** » 11 avr. 2006, 15:57

Merci de vos réponse déja! Ca me va droit au coeur mais...malheureusement y a un mais!
Ma iframe est bien créée je pense sinon je c pas comment le vérifier...
Dans tous les cas elle fonctionne correctement sur MSIE ca voudrait pas dire kel est bien créée?
Sinon g mis a jour Firefox et l'iframe est devenu blanche (c'est déja ca!), mais maintenant elle veut plus que j'écrive dedans!oh misère...
Sinon pour la détéction des navigateur... je m'intéresse qu'à Mozilla
et MSIE... du moins l'entreprise dans laquelle je suis...
Je suis en DUT info (je suis pas un crac donc soyez indulgent ^^)
et je fais actuellement mon stage de fin d'étude à Montréal (en plus ac le CPE ca faisait un ti moment que j'avais pas programmé ^^").

Sinon Martin, mes éléments (graphiques) sont tous créés dans ma fonction "affichage" qui va avec "window.onload". Ensuite j'ai une fonction "iniEditor"
qui va me rendre mon iframe éditable et que je lance dans la fonction "affichage". Moralité, j'ai pas compris ce que tu voulais m'expliquer. Je fais du javascript depuis a peu près 10j
et les DOM, l'ajax et compagnie ca me donnent de ces mal de tête... j'en dors plus lol!

Donc si vous avez des suggestions je serai votre obligé...

Merci

PS : voici le code de ma page entière... un peu bourrin non?

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<META HTTP-EQUIV="Pragma" CONTENT="No-cache">
<title>Test</title>
<style>
   html, body { background-color:#ffffff; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; font:8pt Arial,Helvetica,Sans-serif; }
</style>
<script language="JavaScript">


function affichage()
{
 var toolbar=document.createElement("div");//crée un élément ayant en HTML la balise <div>
 toolbar.id="toolbar";
 toolbar.style.position="absolute";
 toolbar.style.top="10px";
 toolbar.style.left="10px";
 toolbar.style.width="450px";
 toolbar.style.height="26px";
 toolbar.style.border="1px solid black";
 toolbar.style.backgroundImage="url(/icon/toolbar/toolbar-bg.gif)";
 toolbar.style.backgroundRepeat="repeat-X";
 toolbar.style.backgroundPosition="top left";
 document.body.appendChild(toolbar);//accroche cet élément en tant que fils du body

 var pointilles=document.createElement("img");//crée un élément ayant en HTML la balise <img>
 pointilles.style.position="absolute";
 pointilles.style.top="5px";
 pointilles.style.left="2px";
 pointilles.src="/icon/toolbar/toolbar-handle.gif";
 pointilles.width="3";
 pointilles.height="15";
 toolbar.appendChild(pointilles);//accroche cet élément en tant que fils de l'élément toolbar

 var separation=document.createElement("img");
 separation.style.position="absolute";
 separation.style.top="3px";
 separation.style.left="7px";
 separation.src="/icon/toolbar/toolbar-separation.gif";
 separation.width="2";
 separation.height="19";
 toolbar.appendChild(separation);


 var newmsg=document.createElement("img");
 newmsg.style.position="absolute";
 newmsg.style.top="7px";
 newmsg.style.left="11px";
 newmsg.src="/icon/msglist/listhdr-status.gif";
 newmsg.width="10";
 newmsg.height="12";
 toolbar.appendChild(newmsg);

 var separation=document.createElement("img");
 separation.style.position="absolute";
 separation.style.top="3px";
 separation.style.left="25px";
 separation.src="/icon/toolbar/toolbar-separation.gif";
 separation.width="2";
 separation.height="19";
 toolbar.appendChild(separation);

 var save=document.createElement("img");
 save.style.position="absolute";
 save.style.top="5px";
 save.style.left="29px";
 save.src="/icon/save.gif";
 save.width="16";
 save.height="16";
 toolbar.appendChild(save);

 var separation=document.createElement("img");
 separation.style.position="absolute";
 separation.style.top="3px";
 separation.style.left="47px";
 separation.src="/icon/toolbar/toolbar-separation.gif";
 separation.width="2";
 separation.height="19";
 toolbar.appendChild(separation);

 var fontbox=document.createElement("select");
 fontbox.style.position="absolute";
 fontbox.style.top="3px";
 fontbox.style.left="51px";
 fontbox.style.width="100px";
 fontbox.style.height="20px";
 fontbox.style.fontSize="8pt";
 fontbox.style.border="1px solid black";
 toolbar.appendChild(fontbox);

 var option1=document.createElement("option");
 option1.value="null";
 option1.label="";
 fontbox.appendChild(option1);

 var option2=document.createElement("option");
 option2.value="Arial";
 option2.style.fontFamily="Arial";
 var label2=document.createTextNode("Arial");
 option2.appendChild(label2);
 fontbox.appendChild(option2);

 var option3=document.createElement("option");
 option3.value="Helvetica";
 option3.style.fontFamily="Helvetica";
 var label3=document.createTextNode("Helvetica");
 option3.appendChild(label3);
 fontbox.appendChild(option3);

 var option4=document.createElement("option");
 option4.value="Impact";
 option4.style.fontFamily="Impact";
 var label4=document.createTextNode("Impact");
 option4.appendChild(label4);
 fontbox.appendChild(option4);

 var fontheightbox=document.createElement("select");
 fontheightbox.style.position="absolute";
 fontheightbox.style.top="3px";
 fontheightbox.style.left="153px";
 fontheightbox.style.width="50px";
 fontheightbox.style.height="20px";
 fontheightbox.style.fontFamily="Arial";
 fontheightbox.style.fontSize="8pt";
 fontheightbox.style.border="1px solid black";
 toolbar.appendChild(fontheightbox);

 var option1=document.createElement("option");
 option1.value="null";
 option1.label="";
 fontheightbox.appendChild(option1);

 var option2=document.createElement("option");
 option2.value="10";
 var label2=document.createTextNode("10");
 option2.appendChild(label2);
 fontheightbox.appendChild(option2);

 var option3=document.createElement("option");
 option3.value="12";
 var label3=document.createTextNode("12");
 option3.appendChild(label3);
 fontheightbox.appendChild(option3);

 var option4=document.createElement("option");
 option4.value="14";
 var label4=document.createTextNode("14");
 option4.appendChild(label4);
 fontheightbox.appendChild(option4);

 var separation=document.createElement("img");
 separation.style.position="absolute";
 separation.style.top="3px";
 separation.style.left="205px";
 separation.src="/icon/toolbar/toolbar-separation.gif";
 separation.width="2";
 separation.height="19";
 toolbar.appendChild(separation);

 var gras=document.createElement("img");  //<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<
 gras.id="gras";
 gras.style.position="absolute";
 gras.style.top="3px";
 gras.style.left="209px";
 gras.src="/icon/gras.jpg";
 gras.width="19";
 gras.height="19";
 toolbar.appendChild(gras);
 //gras.onClick = setContent();

 var italique=document.createElement("img");
 italique.style.position="absolute";
 italique.style.top="4px";
 italique.style.left="230px";
 italique.src="/icon/italique.jpg";
 italique.width="18";
 italique.height="18";
 toolbar.appendChild(italique);

 var underline=document.createElement("img");
 underline.style.position="absolute";
 underline.style.top="3px";
 underline.style.left="250px";
 underline.src="/icon/underline.gif";
 underline.width="21";
 underline.height="20";
 toolbar.appendChild(underline);

 var separation=document.createElement("img");
 separation.style.position="absolute";
 separation.style.top="3px";
 separation.style.left="273px";
 separation.src="/icon/toolbar/toolbar-separation.gif";
 separation.width="2";
 separation.height="19";
 toolbar.appendChild(separation);

 var alignleft=document.createElement("img");
 alignleft.style.position="absolute";
 alignleft.style.top="2px";
 alignleft.style.left="277px";
 alignleft.src="/icon/icon_editor_left.gif";
 alignleft.width="23";
 alignleft.height="22";
 toolbar.appendChild(alignleft);

 var aligncenter=document.createElement("img");
 aligncenter.style.position="absolute";
 aligncenter.style.top="5px";
 aligncenter.style.left="302px";
 aligncenter.src="/icon/align_center_icon.bmp";
 aligncenter.width="16";
 aligncenter.height="16";
 toolbar.appendChild(aligncenter);

 var alignright=document.createElement("img");
 alignright.style.position="absolute";
 alignright.style.top="2px";
 alignright.style.left="320px";
 alignright.src="/icon/icon_editor_right.gif";
 alignright.width="22";
 alignright.height="22";
 toolbar.appendChild(alignright);

 var justify=document.createElement("img");
 justify.style.position="absolute";
 justify.style.top="3px";
 justify.style.left="344px";
 justify.src="/icon/icon_justify.gif";
 justify.width="20";
 justify.height="20";
 toolbar.appendChild(justify);

 var separation=document.createElement("img");
 separation.style.position="absolute";
 separation.style.top="3px";
 separation.style.left="366px";
 separation.src="/icon/toolbar/toolbar-separation.gif";
 separation.width="2";
 separation.height="19";
 toolbar.appendChild(separation);

 var alineagauche=document.createElement("img");
 alineagauche.style.position="absolute";
 alineagauche.style.top="1px";
 alineagauche.style.left="370px";
 alineagauche.src="/icon/alinea.gif";
 alineagauche.width="23";
 alineagauche.height="25";
 toolbar.appendChild(alineagauche);

 var alineadroit=document.createElement("img");
 alineadroit.style.position="absolute";
 alineadroit.style.top="1px";
 alineadroit.style.left="395px";
 alineadroit.src="/icon/alinea2.gif";
 alineadroit.width="25";
 alineadroit.height="25";
 toolbar.appendChild(alineadroit);

 var separation=document.createElement("img");
 separation.style.position="absolute";
 separation.style.top="3px";
 separation.style.left="422px";
 separation.src="/icon/toolbar/toolbar-separation.gif";
 separation.width="2";
 separation.height="19";
 toolbar.appendChild(separation);

 var palette=document.createElement("img");
 palette.style.position="absolute";
 palette.style.top="3px";
 palette.style.left="426px";
 palette.src="/icon/palette.gif";
 palette.width="22";
 palette.height="20";
 toolbar.appendChild(palette);

 var msg_para = document.createElement("div");
 msg_para.id="msg_para";
 msg_para.style.position="absolute";
 msg_para.style.top="36px";
 msg_para.style.left="10px";
 msg_para.style.width="450px";
 msg_para.style.height="500px";
 msg_para.style.border="1px solid black";
 msg_para.style.backgroundColor="#d0d4c0";
 msg_para.style.fontFamily="Arial";
 msg_para.style.fontSize="8pt";
 document.body.appendChild(msg_para);//accroche cet élément en tant que fils du body

 var msg_name = document.createElement("div");
 msg_name.id="msg_name";
 msg_name.style.position="absolute";
 msg_name.style.width="240px";
 msg_name.style.height="47px";
 msg_name.style.top="3px";
 msg_name.style.left="10px";
 var label=document.createTextNode("Nom du message :");
 msg_name.appendChild(label);
 msg_para.appendChild(msg_name);

 var msg_name_text = document.createElement("input");
 msg_name_text.id="msg_name_text";
 msg_name_text.type="text";
 msg_name_text.style.position="absolute";
 msg_name_text.style.top="16px";
 msg_name_text.style.left="0px";
 msg_name_text.style.border="1px solid black";
 msg_name_text.style.width="230px";
 msg_name_text.style.height="20px";
 msg_name_text.size="30";
 msg_name_text.maxlength="50";
 msg_name.appendChild(msg_name_text);

 var msg_select = document.createElement("div");
 msg_select.id="msg_select";
 msg_select.style.position="absolute";
 msg_select.style.width="200px";
 msg_select.style.height="47px";
 msg_select.style.top="3px";
 msg_select.style.left="250px";
 var label=document.createTextNode("Select message :");
 msg_select.appendChild(label);
 msg_para.appendChild(msg_select);

 var msg_select_box = document.createElement("select");
 msg_select_box.id="msg_select_box";
 msg_select_box.style.position="absolute";
 msg_select_box.style.width="190px";
 msg_select_box.style.height="20px";
 msg_select_box.style.top="16px";
 msg_select_box.style.left="0px";
 msg_select_box.style.border="1px solid black";
 msg_select.appendChild(msg_select_box);

 var option1=document.createElement("option");
 option1.value="null";
 option1.label="";
 msg_select_box.appendChild(option1);

 var option2=document.createElement("option");
 option2.value="1";
 var label2=document.createTextNode("I'm interesting in your CV");
 option2.appendChild(label2);
 msg_select_box.appendChild(option2);

 var option3=document.createElement("option");
 option3.value="2";
 var label3=document.createTextNode("I'm not interesting in your CV");
 option3.appendChild(label3);
 msg_select_box.appendChild(option3);

 var option4=document.createElement("option");
 option4.value="3";
 var label4=document.createTextNode("Could I meet you?");
 option4.appendChild(label4);
 msg_select_box.appendChild(option4);

 var msg_topic = document.createElement("div");
 msg_topic.id="msg_topic";
 msg_topic.style.position="absolute";
 msg_topic.style.width="450px";
 msg_topic.style.height="50px";
 msg_topic.style.top="50px";
 msg_topic.style.left="10px";

 var label = document.createTextNode("Sujet du message");
 msg_topic.appendChild(label);

 var msg_topic_input = document.createElement("input");
 msg_topic_input.id="msg_topic_input";
 msg_topic_input.style.position="absolute";
 msg_topic_input.style.top="16px";
 msg_topic_input.style.left="0px";
 msg_topic_input.style.border="1px solid black";
 msg_topic_input.style.width="430px";
 msg_topic_input.style.height="20px";
 msg_topic_input.size="65";
 msg_topic_input.maxlength="100";
 msg_topic.appendChild(msg_topic_input);
 msg_para.appendChild(msg_topic);

 var msg_text = document.createElement("div");
 msg_text.id="msg_text";
 msg_text.style.position="absolute";
 msg_text.style.width="450px";
 msg_text.style.height="400px";
 msg_text.style.top="100px";
 msg_text.style.left="0px";
 msg_para.appendChild(msg_text);

 var msg_textarea = document.createElement("iframe");
 msg_textarea.id="msg_textarea";
 msg_textarea.style.position="absolute";
 msg_textarea.style.top="10px";
 msg_textarea.style.left="10px";
 msg_textarea.style.border="1px solid black";
 msg_textarea.style.width="430px";
 msg_textarea.style.height="380px";
 msg_textarea.src="iframe.htm";
 msg_textarea.rows="22";
 msg_textarea.cols="50";
 msg_textarea.wrap="virtual";
 msg_text.appendChild(msg_textarea);

 window.document.body.onload=iniEditor();//charge la fonction iniEditor à partir du body
}



function iniEditor()//rend l'iframe ayant l'id "msg_textarea" éditable
{
  if(isIE)//pour IE
  {
     var doc = window.frames['msg_textarea'].document;//récupère le document de la frame grace à un tableau de frames de la page avec l'id de la frame comme indice
     doc.designMode = 'On';//attribut permettant l'édition
  }
  else if (isMozilla)    //pour Mozilla Firefox
  {
     var doc = document.getElementById('msg_textarea').contentDocument;//récupère le document de la frame grace à l'élément récupéré par l'id de la frame
     doc.designMode = 'On';//attribut permettant l'édition
  }
  else
    alert("Nous vous conseillons d'installer une des dernières versions de Mozilla Firefox ou d'Internet Explorer.");
}//iniEditor



function setContent(action)
{
  if(isIE)//pour IE
  {
    win = window.frames['msg_textarea'];
    doc = win.document;
  }
  else if (isMozilla)
  {
    win = document.getElementById('msg_textarea').contentWindow;
    doc = document.getElementById('msg_textarea').contentDocument;

  }
  doc.execCommand(action, false, null);
  win.focus();//met la fenetre en premier plan
  alert("bien");
 }

//##################################################################---MAIN---###################################################################

//Ces 2 variables servent à identifier Internet Explorer ou Mozilla en tant que navigateur utilisé
 var isIE = typeof document.all != "undefined" && typeof document.getElementById != "undefined" && typeof window.opera == "undefined";//document.all est une
                                                                                                                                       //fonctionnalité propre à IE et
                                                                                                                                       //getElementById prouve que le DOM
                                                                                                                                       //existe bien
 var isMozilla = typeof document.all == "undefined" && typeof document.getElementById != "undefined" && typeof window.opera == "undefined";


 window.onload = affichage;


</script>
</head>
<body>
</body>
</html>

Et voila la page de mon iframe:

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

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

martin · Message par **martin** » 11 avr. 2006, 18:11

Ouch ! un lien aurait été plus pertinent, non ?

Dans le désordre :

Pour vérifier si tes éléments sont correctement créés, dans Firefox, sers toi de l'inspecteur DOM (menu outils). Il faut qu'il ait été installé à l'installation de Firefox (en choisissant quelque chose comme "avancé" plutôt que "par défaut" à l'installation).
Il est évident que ce n'est pas parce que IE te crée un élément que Firefox ou un autre navigateur le fait aussi.
Sert toi aussi de la console javascript, elle peut te donner beaucoup d'infos.

A priori, tes affections successives de fonction sur l'évenement onload doivent se marcher sur les pieds.
Pour mettre des fonctions multiples, il faut te servir de addEventListener pour Firefox et de attachEvent pour IE.
Mais dans ton cas, je pense qu'il ne devrais y avoir qu'une seule fonction sur le onload, celle ci faisant appel à d'autres.

Pour basculer ton iframe avec un designMode à on, Firefox est effectivement chatouilleux sur ce point. Il a besoin que le contentDocument de l'iframe lui soit accessible via le dom, ce qui n'est pas forcément immédiat. Quelque chose du genre :

Code : Tout sélectionner

function initDesignMode() {
  if (!document.getElementById(iframeId).contentWindow) {
  	setTimeout(initDesignMode, 1);
  	return;
  }
  document.getElementById(iframeId).contentWindow.document.designMode = 'on';
}

devrait marcher.

Le conseil éclairé de Benoit, c'est que plutôt que définir tes variables isIE et isMozilla, c'est de tester l'existence de ce que tu veux employer dans ton code, de l'employer si oui, de faire autre chose sinon.
exemple: addEventListener et attachEvent, sont des méthodes employées respectivement par les navigateurs respectueux des standards et IE.

Code : Tout sélectionner

if (obj.addEventListener){
  obj.addEventListener(evType, fn, useCapture);
  
} else if (obj.attachEvent){
  obj.attachEvent("on"+evType, fn);
}

Sinon tu vas te retrouver avec des variables isOpera, isSafari, voire même isFirefox107, isFirefox15, isIE55, isIE6... Et il te faudra recommencer lors des mises à jour des logiciels.

allen.shezar · Message par **allen.shezar** » 11 avr. 2006, 20:10

Merci Martin pour ton aide mais pourrais tu m'expliquer ta fonction initDesignMode? Je comprends pas bien ce quel fait et ne voit pas en koi elle résoud mon probleme. Dsl mais je suis un gros boulet...
Sinon l'explication de Benoit que tu m'as éclairée donnerai ca par rapport au code d'avant? >>>

if(window.frame['msg_textarea'].document)//pour IE
{
var doc = window.frames['msg_textarea'].document;//récupère le document de la frame grace à un tableau de frames de la page avec l'id de la frame comme indice
doc.designMode = 'On';//attribut permettant l'édition
}
else if (document.getElementById('msg_textarea')) //pour Mozilla Firefox
{
var doc = document.getElementById('msg_textarea').contentDocument;//récupère le document de la frame grace à l'élément récupéré par l'id de la frame
doc.designMode = 'On';
}
else
alert("Nous vous conseillons d'installer une des dernières versions de Mozilla Firefox ou d'Internet Explorer.");
}//iniEditor

Sinon g pas bien compris... l'évènement onload est unique?Affectations successives?C'est pourtant pas le meme objet... C compliqué >_< !!

PS : Martin :"Je te conseille de créer tes éléments dans ta fonction iniEditor(), en tout cas aprés l'événement onload de ta page. "

Avec le code que je t'ai montré je crée bien les élément avec l'évènement onload?pas après? je suis bien obligé de le faire comme ca si je ve que ca s'affiche au chargement de ma page?

PS n°2: c'est koi les fonctions multiples dont tu parles?l'iframe est bien créée dans mon DOM

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

martin · Message par **martin** » 11 avr. 2006, 21:34

allen.shezar a écrit :Merci Martin pour ton aide mais pourrais tu m'expliquer ta fonction initDesignMode? Je comprends pas bien ce quel fait et ne voit pas en koi elle résoud mon probleme. Dsl mais je suis un gros boulet...

Tu construis tes éléments sur body.onload dans une fonction A, donc quand tout le DOM de la page et que ses contenus ont été chargés.
Cette fonction A crée une iframe. Et tu veux changer une propriété interne à cette iframe. Mais le DOM interne à cette iframe n'est pas encore disponible...
Donc l'exemple de la fonction initDesignMode teste l'existence du window de cette fenêtre. Si elle n'existe pas encore, la fonction s'appelle elle même 1ms plus tard, et stoppe les traitements suivant.
Quand elle est relancée, elle fait le même test, si le window interne existe, elle change la propriété designMode, sinon elle recommence.

allen.shezar a écrit : Sinon l'explication de Benoit que tu m'as éclairée donnerai ca par rapport au code d'avant? >>>

if(window.frame['msg_textarea'].document)//pour IE
{
var doc = window.frames['msg_textarea'].document;//récupère le document de la frame grace à un tableau de frames de la page avec l'id de la frame comme indice
doc.designMode = 'On';//attribut permettant l'édition
}
else if (document.getElementById('msg_textarea')) //pour Mozilla Firefox
{
var doc = document.getElementById('msg_textarea').contentDocument;//récupère le document de la frame grace à l'élément récupéré par l'id de la frame
doc.designMode = 'On';
}
else
alert("Nous vous conseillons d'installer une des dernières versions de Mozilla Firefox ou d'Internet Explorer.");
}//iniEditor

Oui c'est çà, sauf que j'inverserai tes 2 premiers tests, pour la bonne raison que IE connait getElementById, tout comme gecko. Passer par le tableau frames[] peut être nécessaire pour de vieilles versions de IE (je ne sais pas lesquelles précisement).
Et le dernier test ne devrait pas renvoyer ce message d'erreur, mais permettre d'utiliser un textarea classique ! (du moins à mon goût)
De plus, personnellement je place toujours les fonctions standardisée en premier dans de tels tests, c'est quand même la solution la plus pérenne je pense.

allen.shezar a écrit :Sinon g pas bien compris... l'évènement onload est unique?Affectations successives?C'est pourtant pas le meme objet... C compliqué >_< !!

tel que tu le fais, oui.
supposons un script:

Code : Tout sélectionner

window.onload = functionA;
window.onload = functionB;

La fonction A ne se déclenchera jamais, elle est écrasée par la fonction B.
Exactement comme :

Code : Tout sélectionner

variable = 0;
variable = 1;
alert(variable)

te renverra toujours 1.

La seule manière de pouvoir déclencher A et B et de passer par addEventListener ou attachEvent. Le problème est que tu ne peux pas être sûr de l'ordre des fonctions lors de l'événement... Cependant, dans ton cas, je pense que tu n'as qu'une procédure a déclencher : la création de ton éditeur. Cette procédure fera elle même appel à des sous traitements (créer les élements, basculer le designMode,...)

allen.shezar a écrit : l'iframe est bien créée dans mon DOM

Avec le code que je vois, je pense que oui. Mais j'insiste, essaie l'inspecteur DOM, c'est simple, et t'aidera sûrement beaucoup pour le reste de ton code.

allen.shezar · Message par **allen.shezar** » 11 avr. 2006, 21:56

Tout d'abord j'ai changé mon code pr les évènements. Je garde la fonction init qui se lance au chargement de la page mais je ne mets plus d'évènement pr la fonction initEditor. Je me suis aperçu qu'à ce niveau j'avais vraiment sucker.
Je fais juste un appel de celle ci a la fin de ma fonction init et ca tourne mieux.
Dans tous les cas j'ai trouvé des trucs sur les EventListener et les AttachEvent mais j'ai opté pour la solution :

window.onload=fonctionC;

fonctionC()
{
fonctionA();
fonctionB();
}
Mais je crois que j'utiliserai tes fonctions plus tard parce que mon sujet de stage est encore flou.

Du moins c'est toujours pas éditable en Firefox ^^"!
Sinon le DOM je le regarde comme tu m'as dit et j'ai bien la frame. J'ai utiliser le débuggeur JS de Firefox pour regarder s'il me mettez bien l'attribut designMode de "doc" à "On" et il le fait... je commence à perdre mes chvx...

Donc je sais pas si ça efface les doutes que tu avais sur l'accessibilité du document de la frame.
Mais je ne comprends tjrs pas en quoi le fait de boucler la fonction après 1 ms s'il y a un problème que l'on ne résoud pas.
Merci pour toute tes réponses; moi le cancre, ca me donne gout a la prog!

PS:avant j'avais mis un textarea mais le big boss a dit que ca serait mieux une frame donc voila. De plus maintenant j'ai plus de retour à la ligne!!!

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.1) Gecko/20060111 Firefox/1.5.0.1

martin · Message par **martin** » 12 avr. 2006, 10:21

allen.shezar a écrit : Dans tous les cas j'ai trouvé des trucs sur les EventListener et les AttachEvent mais j'ai opté pour la solution :

window.onload=fonctionC;

fonctionC()
{
fonctionA();
fonctionB();
}
Mais je crois que j'utiliserai tes fonctions plus tard parce que mon sujet de stage est encore flou.

Voilà, c'est ce que je t'expliquais. Si plus tard tu as besoin des addEventListener, voilà une belle solution pour tout navigateur. Mais une chose aprés l'autre

.

allen.shezar a écrit :Mais je ne comprends tjrs pas en quoi le fait de boucler la fonction après 1 ms s'il y a un problème que l'on ne résoud pas.
Merci pour toute tes réponses; moi le cancre, ca me donne gout a la prog!

La fonction proposée est récursive, elle tourne en boucle jusqu'à ce que l'objet interne à l'iframe et nécessaire au script soit disponible.
J'aurai pu mettre une valeur de 0ms dans le setTimeout (qui n'en serait pas vraiment un dans la réalité), mais 1ms me semble plus cohérent. L'important est que cette fonction puisse tourner en boucle sur elle-même. Attention, du fait du setTimeout, elle devient asynchrone, c'est à dire que la suite du script est interprété même si la fonction n'a pas finit.

Je redonne l'explication du pourquoi :
Ton script crée l'iframe, puis veut changer une propriété du contenu de celle ci. Or ce contenu n'est pas encore accessible, çà va trop vite. On boucle donc jusqu'à ce qu'il soit disponible.

Si tu fait :

Code : Tout sélectionner

var win= document.getElementById('msg_textarea').contentWindow;
alert('coucou');
win.document.designMode = 'On';

ma main au feu que çà va marcher, car avec le alert tu auras laisser le temps au contenu de l'iframe de se charger.

Essaie, et poste ton nouveau code si tu n'y arrives pas (entre balises [ code] et [ /code] STP)

allen.shezar a écrit :PS:avant j'avais mis un textarea mais le big boss a dit que ca serait mieux une frame donc voila. De plus maintenant j'ai plus de retour à la ligne!!!

Ce que je te propose c'est, si le navigateur est capable de créer un éditeur wysiwyg, lui en faire un, sinon lui offrir un textarea. Comme çà, TOUS les navigateurs pourront rentrer du texte.

De toute façon il va bien te falloir un textarea. Si l'utilisateur crée du contenu, tu vas vouloir le récupérer (je suppose), et donc tu n'auras pas d'autre moyen que de passer par un textarea, même caché.
Donc à mon avis, ta page devrait contenir un textarea (réellement, pas créé par script), et ton script devrait créer ton éditeur si le navigateur le supporte, et cacher le textarea.

allen.shezar · Message par **allen.shezar** » 02 mai 2006, 17:45

Dsl de n'avoir pas pu te repondre plus tôt Martin.
Je pense que maintenant je dois pouvoir comprendre sans trop de difficulté ce que toi ou quelqu'un d'autre me racontera.
D'une part tu me lances sur une textarea, il n'est vraiment pas possible de récupéré le contenu de l'iframe? Après je veux bien faire une texte area si je peux avoir toutes les fonctionnalités mais lis la suite...
D'autre part c'est quoi en simple un éditeur wysiwyg?
Sinon mon tuteur de stage a montré enfin son vrai visage... je programme maintenant en Javascript pur orienté objet., ca permet à l'ASP d'etre en AJAX avec la fonction XmlHttpRequest.
Et les objets communiquent entre eux par des messages.
Pour le moment je reste sur mon idée de départ avec une simple iframe et un designMode à On mais je suis actuellement encore en galère avec firefox qui ne la rend pas éditable et désormais plante (il charge non stop). Avec MSIE ca passe nikel...
Voici mon code :

Code : Tout sélectionner

/*******************************************************************************
 * Classe: RichTextEditor
 * Auteur: Romain Denis
 * Date: 1 mai 2006
 * Paramètre:
 *    - parentControl:Control
 *       Requis:Pointeur sur le controle parent.
 *    - objname:String
 *       Requis:Nom interne du div.
 *    - node:DOMNode
 *       Optionnel:Pointeur sur le noeud XML pour la désérialisation.
 * Description:
 *    Création d'une fenetre d'édition de texte
 * Utilisation:
 *    var RichTextEditor = new RichTextEditor(this, "RichTextEditor001", null);
 ******************************************************************************* 
 * Modifications
 ******************************************************************************/
RichTextEditor = function(parentControl,objname,node)
 {
 
//==============================================================================
//  Variables et constantes de la classe
//==============================================================================

   document.ScreenManager.debugMessage = true;

// Déclaration des variables privées  ------------------------------------------
   var scManager = document.ScreenManager;
   
   var BG_COLOR = "#d4d0c8";
   var WIDTH = 500;
   var HEIGHT = 500;
   var BORDER = 10;
   var isIE = typeof document.all != "undefined" && typeof document.getElementById != "undefined" && typeof window.opera == "undefined";//document.all est une
                                                                                                                                       //fonctionnalité propre à IE et
                                                                                                                                       //getElementById prouve que le DOM
                                                                                                                                       //existe bien
                                                                                                                                       
   var isMozilla = typeof document.all == "undefined" && typeof document.getElementById != "undefined" && typeof window.opera == "undefined";

// Déclaration des variables publiques  ----------------------------------------

   // Nom du controle
   this.objname = objname;
   // Controle parent
   this.parentControl = parentControl;
   
   this.width = WIDTH;
   this.height = HEIGHT;
   this.offsetTop = 0;
   this.offsetLeft = 0;
   this.absoluteTop = 0;
   this.absoluteLeft = 0;
   

//==============================================================================
//  Initialisation du control
//==============================================================================
this.Init = function()
   {

// Récupère les paramètres  ---------------------------------------------------*

      var array = this.unserialize(node);

// Texte d'initialisation pour le splash  --------------------------------------*

      if (array['Params']['Initphrase'] != null)
         document.ScreenManager.sendMessage("SplashControlLoading", array['Params']['Initphrase']);
      else document.ScreenManager.sendMessage("SplashControlLoading", objname);
      
// Initialisation des variables de position  -----------------------------------*

      if (array['Params']['offsetTop'] != null) this.offsetTop = parseInt(array['Params']['offsetTop']);
      if (array['Params']['offsetLeft'] != null) this.offsetLeft = parseInt(array['Params']['offsetLeft']);

      this.absoluteTop  = this.parentControl.absoluteTop + this.offsetTop;
      this.absoluteLeft = this.parentControl.absoluteLeft + this.offsetLeft;


// Efface le tableau utilisé pour la dé-sérialisation
      delete array;

// Initialisation du DIV du RichTextEditor -------------------------------------*

      this.mainDiv                       = document.createElement("div");
      this.mainDiv.id                    = this.objname;
      this.mainDiv.parentControl         = this;
      this.mainDiv.style.position        = "absolute";
      this.mainDiv.style.display         = "none";
      this.mainDiv.style.top             = this.offsetTop + "px";
      this.mainDiv.style.left            = this.offsetLeft + "px";
      this.mainDiv.style.height          = this.height + "px";
      this.mainDiv.style.width           = this.width + "px";
      this.mainDiv.style.backgroundColor = BG_COLOR;
      this.mainDiv.style.border="1px solid black";
      
// Ajoute le RichTextEditor au DIV parent  -------------------------------------*
      this.parentControl.mainDiv.appendChild(this.mainDiv);    

// Initialisation de l'iframe du RichTextEditor  -------------------------------*      
      this.iframe                        = document.createElement("iframe"); 
      this.iframe.id                     = this.objname + "-iframe"; 
      this.iframe.style.position         = "absolute";
      this.iframe.style.display          = "none"; 
      this.iframe.style.top              = BORDER + "px"; 
      this.iframe.style.left             = BORDER + "px"; 
      this.iframe.style.height           = this.height - BORDER*2 + "px"; 
      this.iframe.style.width            = this.width - BORDER*2 + "px"; 
      this.iframe.style.border           = "1px solid black"; 
      this.iframe.src                    = "iframe.htm"; 
      this.iframe.marginwidth            = "0 px"; 
      this.iframe.marginheight           = "0 px";
      this.iframe.scrolling              = "no";
      //this.iframe.style.visibility       = "hidden";     
        
// Ajoute l'iframe au RichTextEditor  ------------------------------------------*
      this.mainDiv.appendChild(this.iframe);

//Affiche l'iframe du RichTextEditor   
      this.iframe.style.display = "block";

//Affiche le RichTextEditor       
      this.mainDiv.style.display = "block";

this.iniEditor(this.iframe.id);
this.bold(this.iframe.id);

};//Init

//==============================================================================
//  Routines de resize
//==============================================================================
this.OnResize = function() {};

//==============================================================================
//  Routines diverses
//==============================================================================
this.iniEditor = function(id)//rend l'iframe dont l'id est passée en parametre éditable
{
  var doc = null;
  if(isIE)//pour IE
  {
     doc = window.frames[id].document;//récupère le document de la frame grace à un tableau qui range les frames de la page avec l'id de la frame comme indice
  }
  else if (isMozilla)    //pour Mozilla Firefox
  {
     doc = document.getElementById(id).contentDocument;//récupère le document de la frame en cherchant l'élément ayant l'id de la frame
  }
  else
    alert("Nous vous conseillons d'installer une des dernières versions de Mozilla Firefox ou d'Internet Explorer.");
  doc.designMode = 'On';
};//iniEditor

this.bold = function(id)
{
  if(isIE)
  {
    var win = window.frames[id];
    var doc = win.document;
  }
  else if (isMozilla)
  {
    var win = document.getElementById(id).contentWindow;
    var doc = document.getElementById(id).contentDocument;
  }
  try
    {
     doc.execCommand("bold", false, null);
    }
  catch(ex){alert(ex["message"]);}
  win.focus();//met la fenetre en premier plan
};





//  Action d'initialisation  ===================================================
  this.Init();


}; //RichTextEditor


RichTextEditor.prototype = new Control();

De plus, la fonction bold fonctionnait avec ma version dure (du moins sur IE) mais plus maintenant, pourquoi?C'est parce que je ne la déclenche pas avec un évènement?
Ce que j'appelle ma version "dure", si ca peux vous etre utile...

Code : Tout sélectionner

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN">
<html>
<head>
<META HTTP-EQUIV="Pragma" CONTENT="No-cache">
<title>Test</title>
<style>
   html, body { background-color:#ffffff; margin:0px 0px 0px 0px; padding:0px 0px 0px 0px; font:8pt Arial,Helvetica,Sans-serif; }
</style>
<script language="JavaScript">


function init()
{
 if (!W3CDOM) return;


 var toolbar=document.createElement("div");//crée un élément ayant en HTML la balise <div>
 toolbar.id="toolbar";
 toolbar.style.position="absolute";
 toolbar.style.top="10px";
 toolbar.style.left="10px";
 toolbar.style.width="450px";
 toolbar.style.height="26px";
 toolbar.style.border="1px solid black";
 toolbar.style.backgroundImage="url(/icon/toolbar/toolbar-bg.gif)";
 toolbar.style.backgroundRepeat="repeat-X";
 toolbar.style.backgroundPosition="top left";
 document.body.appendChild(toolbar);//accroche cet élément en tant que fils du body

 var pointilles=document.createElement("img");//crée un élément ayant en HTML la balise <img>
 pointilles.style.position="absolute";
 pointilles.style.top="5px";
 pointilles.style.left="2px";
 pointilles.src="/icon/toolbar/toolbar-handle.gif";
 pointilles.width="3";
 pointilles.height="15";
 toolbar.appendChild(pointilles);//accroche cet élément en tant que fils de l'élément toolbar

 var separation=document.createElement("img");
 separation.style.position="absolute";
 separation.style.top="3px";
 separation.style.left="7px";
 separation.src="/icon/toolbar/toolbar-separation.gif";
 separation.width="2";
 separation.height="19";
 toolbar.appendChild(separation);


 var newmsg=document.createElement("img");
 newmsg.style.position="absolute";
 newmsg.style.top="7px";
 newmsg.style.left="11px";
 newmsg.src="/icon/msglist/listhdr-status.gif";
 newmsg.width="10";
 newmsg.height="12";
 toolbar.appendChild(newmsg);

 var separation=document.createElement("img");
 separation.style.position="absolute";
 separation.style.top="3px";
 separation.style.left="25px";
 separation.src="/icon/toolbar/toolbar-separation.gif";
 separation.width="2";
 separation.height="19";
 toolbar.appendChild(separation);

 var save=document.createElement("img");
 save.style.position="absolute";
 save.style.top="5px";
 save.style.left="29px";
 save.src="/icon/save.gif";
 save.width="16";
 save.height="16";
 toolbar.appendChild(save);

 var separation=document.createElement("img");
 separation.style.position="absolute";
 separation.style.top="3px";
 separation.style.left="47px";
 separation.src="/icon/toolbar/toolbar-separation.gif";
 separation.width="2";
 separation.height="19";
 toolbar.appendChild(separation);

 var fontbox=document.createElement("select");
 fontbox.style.position="absolute";
 fontbox.style.top="3px";
 fontbox.style.left="51px";
 fontbox.style.width="100px";
 fontbox.style.height="20px";
 fontbox.style.fontSize="8pt";
 fontbox.style.border="1px solid black";
 toolbar.appendChild(fontbox);

 var option1=document.createElement("option");
 option1.value="null";
 option1.label="";
 fontbox.appendChild(option1);

 var option2=document.createElement("option");
 option2.value="Arial";
 option2.style.fontFamily="Arial";
 var label2=document.createTextNode("Arial");
 option2.appendChild(label2);
 fontbox.appendChild(option2);

 var option3=document.createElement("option");
 option3.value="Helvetica";
 option3.style.fontFamily="Helvetica";
 var label3=document.createTextNode("Helvetica");
 option3.appendChild(label3);
 fontbox.appendChild(option3);

 var option4=document.createElement("option");
 option4.value="Impact";
 option4.style.fontFamily="Impact";
 var label4=document.createTextNode("Impact");
 option4.appendChild(label4);
 fontbox.appendChild(option4);

 var fontheightbox=document.createElement("select");
 fontheightbox.style.position="absolute";
 fontheightbox.style.top="3px";
 fontheightbox.style.left="153px";
 fontheightbox.style.width="50px";
 fontheightbox.style.height="20px";
 fontheightbox.style.fontFamily="Arial";
 fontheightbox.style.fontSize="8pt";
 fontheightbox.style.border="1px solid black";
 toolbar.appendChild(fontheightbox);

 var option1=document.createElement("option");
 option1.value="null";
 option1.label="";
 fontheightbox.appendChild(option1);

 var option2=document.createElement("option");
 option2.value="10";
 var label2=document.createTextNode("10");
 option2.appendChild(label2);
 fontheightbox.appendChild(option2);

 var option3=document.createElement("option");
 option3.value="12";
 var label3=document.createTextNode("12");
 option3.appendChild(label3);
 fontheightbox.appendChild(option3);

 var option4=document.createElement("option");
 option4.value="14";
 var label4=document.createTextNode("14");
 option4.appendChild(label4);
 fontheightbox.appendChild(option4);

 var separation=document.createElement("img");
 separation.style.position="absolute";
 separation.style.top="3px";
 separation.style.left="205px";
 separation.src="/icon/toolbar/toolbar-separation.gif";
 separation.width="2";
 separation.height="19";
 toolbar.appendChild(separation);

 var gras=document.createElement("img");
 gras.id="gras";
 gras.style.position="absolute";
 gras.style.top="3px";
 gras.style.left="209px";
 gras.src="/icon/gras.jpg";
 gras.width="19";
 gras.height="19";
 toolbar.appendChild(gras);


 var italique=document.createElement("img");
 italique.style.position="absolute";
 italique.style.top="4px";
 italique.style.left="230px";
 italique.src="/icon/italique.jpg";
 italique.width="18";
 italique.height="18";
 toolbar.appendChild(italique);

 var underline=document.createElement("img");
 underline.style.position="absolute";
 underline.style.top="3px";
 underline.style.left="250px";
 underline.src="/icon/underline.gif";
 underline.width="21";
 underline.height="20";
 toolbar.appendChild(underline);

 var separation=document.createElement("img");
 separation.style.position="absolute";
 separation.style.top="3px";
 separation.style.left="273px";
 separation.src="/icon/toolbar/toolbar-separation.gif";
 separation.width="2";
 separation.height="19";
 toolbar.appendChild(separation);

 var alignleft=document.createElement("img");
 alignleft.style.position="absolute";
 alignleft.style.top="2px";
 alignleft.style.left="277px";
 alignleft.src="/icon/icon_editor_left.gif";
 alignleft.width="23";
 alignleft.height="22";
 toolbar.appendChild(alignleft);

 var aligncenter=document.createElement("img");
 aligncenter.style.position="absolute";
 aligncenter.style.top="5px";
 aligncenter.style.left="302px";
 aligncenter.src="/icon/align_center_icon.bmp";
 aligncenter.width="16";
 aligncenter.height="16";
 toolbar.appendChild(aligncenter);

 var alignright=document.createElement("img");
 alignright.style.position="absolute";
 alignright.style.top="2px";
 alignright.style.left="320px";
 alignright.src="/icon/icon_editor_right.gif";
 alignright.width="22";
 alignright.height="22";
 toolbar.appendChild(alignright);

 var justify=document.createElement("img");
 justify.style.position="absolute";
 justify.style.top="3px";
 justify.style.left="344px";
 justify.src="/icon/icon_justify.gif";
 justify.width="20";
 justify.height="20";
 toolbar.appendChild(justify);

 var separation=document.createElement("img");
 separation.style.position="absolute";
 separation.style.top="3px";
 separation.style.left="366px";
 separation.src="/icon/toolbar/toolbar-separation.gif";
 separation.width="2";
 separation.height="19";
 toolbar.appendChild(separation);

 var alineagauche=document.createElement("img");
 alineagauche.style.position="absolute";
 alineagauche.style.top="1px";
 alineagauche.style.left="370px";
 alineagauche.src="/icon/alinea.gif";
 alineagauche.width="23";
 alineagauche.height="25";
 toolbar.appendChild(alineagauche);

 var alineadroit=document.createElement("img");
 alineadroit.style.position="absolute";
 alineadroit.style.top="1px";
 alineadroit.style.left="395px";
 alineadroit.src="/icon/alinea2.gif";
 alineadroit.width="25";
 alineadroit.height="25";
 toolbar.appendChild(alineadroit);

 var separation=document.createElement("img");
 separation.style.position="absolute";
 separation.style.top="3px";
 separation.style.left="422px";
 separation.src="/icon/toolbar/toolbar-separation.gif";
 separation.width="2";
 separation.height="19";
 toolbar.appendChild(separation);

 var palette=document.createElement("img");
 palette.style.position="absolute";
 palette.style.top="3px";
 palette.style.left="426px";
 palette.src="/icon/palette.gif";
 palette.width="22";
 palette.height="20";
 toolbar.appendChild(palette);

 var msg_para = document.createElement("div");
 msg_para.id="msg_para";
 msg_para.style.position="absolute";
 msg_para.style.top="36px";
 msg_para.style.left="10px";
 msg_para.style.width="450px";
 msg_para.style.height="500px";
 msg_para.style.border="1px solid black";
 msg_para.style.backgroundColor="#d0d4c0";
 msg_para.style.fontFamily="Arial";
 msg_para.style.fontSize="8pt";
 document.body.appendChild(msg_para);//accroche cet élément en tant que fils du body

 var msg_name = document.createElement("div");
 msg_name.id="msg_name";
 msg_name.style.position="absolute";
 msg_name.style.width="240px";
 msg_name.style.height="47px";
 msg_name.style.top="3px";
 msg_name.style.left="10px";
 var label=document.createTextNode("Nom du message :");
 msg_name.appendChild(label);
 msg_para.appendChild(msg_name);

 var msg_name_text = document.createElement("input");
 msg_name_text.id="msg_name_text";
 msg_name_text.type="text";
 msg_name_text.style.position="absolute";
 msg_name_text.style.top="16px";
 msg_name_text.style.left="0px";
 msg_name_text.style.border="1px solid black";
 msg_name_text.style.width="230px";
 msg_name_text.style.height="20px";
 msg_name_text.size="30";
 msg_name_text.maxlength="50";
 msg_name.appendChild(msg_name_text);

 var msg_select = document.createElement("div");
 msg_select.id="msg_select";
 msg_select.style.position="absolute";
 msg_select.style.width="200px";
 msg_select.style.height="47px";
 msg_select.style.top="3px";
 msg_select.style.left="250px";
 var label=document.createTextNode("Select message :");
 msg_select.appendChild(label);
 msg_para.appendChild(msg_select);

 var msg_select_box = document.createElement("select");
 msg_select_box.id="msg_select_box";
 msg_select_box.style.position="absolute";
 msg_select_box.style.width="190px";
 msg_select_box.style.height="20px";
 msg_select_box.style.top="16px";
 msg_select_box.style.left="0px";
 msg_select_box.style.border="1px solid black";
 msg_select.appendChild(msg_select_box);

 var option1=document.createElement("option");
 option1.value="null";
 option1.label="";
 msg_select_box.appendChild(option1);

 var option2=document.createElement("option");
 option2.value="1";
 var label2=document.createTextNode("I'm interesting in your CV");
 option2.appendChild(label2);
 msg_select_box.appendChild(option2);

 var option3=document.createElement("option");
 option3.value="2";
 var label3=document.createTextNode("I'm not interesting in your CV");
 option3.appendChild(label3);
 msg_select_box.appendChild(option3);

 var option4=document.createElement("option");
 option4.value="3";
 var label4=document.createTextNode("Could I meet you?");
 option4.appendChild(label4);
 msg_select_box.appendChild(option4);

 var msg_topic = document.createElement("div");
 msg_topic.id="msg_topic";
 msg_topic.style.position="absolute";
 msg_topic.style.width="450px";
 msg_topic.style.height="50px";
 msg_topic.style.top="50px";
 msg_topic.style.left="10px";

 var label = document.createTextNode("Sujet du message");
 msg_topic.appendChild(label);

 var msg_topic_input = document.createElement("input");
 msg_topic_input.id="msg_topic_input";
 msg_topic_input.style.position="absolute";
 msg_topic_input.style.top="16px";
 msg_topic_input.style.left="0px";
 msg_topic_input.style.border="1px solid black";
 msg_topic_input.style.width="430px";
 msg_topic_input.style.height="20px";
 msg_topic_input.size="65";
 msg_topic_input.maxlength="100";
 msg_topic.appendChild(msg_topic_input);
 msg_para.appendChild(msg_topic);

 var msg_text = document.createElement("div");
 msg_text.id="msg_text";
 msg_text.style.position="absolute";
 msg_text.style.width="450px";
 msg_text.style.height="400px";
 msg_text.style.top="100px";
 msg_text.style.left="0px";
 msg_para.appendChild(msg_text);

 var msg_textarea = document.createElement("iframe");
 msg_textarea.id="msg_textarea";
 msg_textarea.style.position="absolute";
 msg_textarea.style.top="10px";
 msg_textarea.style.left="10px";
 msg_textarea.style.border="1px solid black";
 msg_textarea.style.width="430px";
 msg_textarea.style.height="380px";
 msg_textarea.src="iframe.htm";
 msg_textarea.rows="22";
 msg_textarea.cols="50";
 msg_textarea.wrap="virtual";
 msg_text.appendChild(msg_textarea);

 iniEditor();
 gras.onclick = bold;
 italique.onclick = italic;
 underline.onclick = souligner;
}


function iniEditor()//rend l'iframe ayant l'id "msg_textarea" éditable
{
  var doc = null;
  if(isIE)//pour IE
  {
     doc = window.frames['msg_textarea'].document;//récupère le document de la frame grace à un tableau de frames de la page avec l'id de la frame comme indice
  }
  else if (isMozilla)    //pour Mozilla Firefox
  {
     doc = document.getElementById('msg_textarea').contentDocument;//récupère le document de la frame grace à l'élément récupéré par l'id de la frame
  }
  else
    alert("Nous vous conseillons d'installer une des dernières versions de Mozilla Firefox ou d'Internet Explorer.");
  doc.designMode = 'On';
  }//iniEditor

//#################################################################FONCTIONS DE TRAITEMENTS DE TEXTES##################################################################

function bold()
{

  if(isIE)//pour IE
  {
    win = window.frames['msg_textarea'];
    doc = win.document;
  }
  else if (isMozilla)
  {
    win = document.getElementById('msg_textarea').contentWindow;
    doc = document.getElementById('msg_textarea').contentDocument;
  }
  try
    {
     doc.execCommand("bold", false, null);
    }
  catch(ex){alert(ex["message"]);}
  win.focus();//met la fenetre en premier plan
}


function italic()
{
  if(isIE)//pour IE
  {
    win = window.frames['msg_textarea'];
    doc = win.document;
  }
  else if (isMozilla)
  {
    win = document.getElementById('msg_textarea').contentWindow;
    doc = document.getElementById('msg_textarea').contentDocument;
  }
  try
    {
     doc.execCommand("italic", false, null);
    }
  catch(ex){alert(ex["message"]);}
  win.focus();//met la fenetre en premier plan
}


function souligner()
{
  if(isIE)//pour IE
  {
    win = window.frames['msg_textarea'];
    doc = win.document;
  }
  else if (isMozilla)
  {
    win = document.getElementById('msg_textarea').contentWindow;
    doc = document.getElementById('msg_textarea').contentDocument;
  }
  try
    {
     doc.execCommand("underline", false, null);
    }
  catch(ex){alert(ex["message"]);}
  win.focus();//met la fenetre en premier plan
}



function justifyRight()
{
  if(isIE)//pour IE
  {
    win = window.frames['msg_textarea'];
    doc = win.document;
  }
  else if (isMozilla)
  {
    win = document.getElementById('msg_textarea').contentWindow;
    doc = document.getElementById('msg_textarea').contentDocument;
  }
  try
    {
     doc.execCommand("justifyRight", false, null);
    }
  catch(ex){alert(ex["message"]);}
  win.focus();//met la fenetre en premier plan
}




//##################################################################---MAIN---###################################################################

 //Cette variable permet de savoir si le navigateur supporte le W3CDOM ou non
 var W3CDOM = (document.createElement && document.getElementsByTagName);
//Ces 2 variables servent à identifier Internet Explorer ou Mozilla en tant que navigateur utilisé
 var isIE = typeof document.all != "undefined" && typeof document.getElementById != "undefined" && typeof window.opera == "undefined";//document.all est une
                                                                                                                                       //fonctionnalité propre à IE et
                                                                                                                                       //getElementById prouve que le DOM
                                                                                                                                       //existe bien
 var isMozilla = typeof document.all == "undefined" && typeof document.getElementById != "undefined" && typeof window.opera == "undefined";


 window.onload = init;


</script>
</head>
<body>
</body>
</html>

Dsl c'est vraiment pas joli à voir

La je viens de chopé sur un site en anglais un editeur de texte plus ou moins en Javascript mais je n'y comprends pas grand chose o_O" . Le but étant juste d'y recupérer la zone de texte éditable pour en faire un objet.

Voici le lien :
http://www.kevinroth.com/rte/demo.htm

J'attends vos réponses avec impatience et vous remercie déja tous d'avance.

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.0.2) Gecko/20060308 Firefox/1.5.0.2

allen.shezar · Message par **allen.shezar** » 09 mai 2006, 18:55

Problème résolu :

Code : Tout sélectionner

this.getWindow = function()
{
	return document.getElementById(this.objname + "-iframe").contentWindow;
};

this.iniEditor = function()
{
  var win = self.getWindow();
  var doc = win.document;

  try{ doc.designMode = 'On';}
  catch(ex){
    setTimeout(function(){self.iniEditor();},50);
  }
};//iniEditor

self.bold = function()
{
 var win = self.getWindow();
 var doc = win.document;
  try
  {
     doc.execCommand("bold", false, null);
  }
  catch(ex){alert(ex["message"]);}
  win.focus();//met la fenetre en premier plan
};

Merci à tous ceux qui m'ont aidé!

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

Message par **Benoit** » 10 mai 2006, 08:07

J'ai une ou deux petites remarques quand même : à plusieurs endroits dans ton code, tu fais un choix binaire isIE/isMozilla. Pourquoi est-ce que ça ne pourrait pas fonctionner dans Safari ? D'une manière générale, en JavaScript il faut toujours faire de la détection d'objet sur les objets que tu vas utiliser (c'est-à-dire pas document.all ou document.opera).

Ainsi, lorsqu'un autre navigateur (c'est peut-être déjà le cas d'Opera 9 j'en sais rien) se met à reconnaître designMode ton site se met immédiatement à fonctionner avec peu ou pas de changements.

L'autre remarque, c'est que

Code : Tout sélectionner

 var label2=document.createTextNode("I'm not interesting in your CV");

n'est probablement pas ce que tu veux dire en anglais (je ne suis pas intéressant dans votre CV ?)

allen.shezar · Message par **allen.shezar** » 10 mai 2006, 19:06

Lol
Merci Benoit pour la traduction de l'anglais. C'était pour tester de toute manière mais je vais quand meme rectifier le tir.
Sinon le patron a décider que ca ne tournerai que sur IE et FF. C'est son probleme s'il reste carré comme ca, moi je suis pas contrariant.

Dans tout les cas le probleme de l'edition venait bien comme le disait martin du fait que le document de l'iframe ne se créait pas tt de suite. Le setTimeout a réglé le probleme.
Maintenant j'en ai des nouveaux (voir le post : Mise en place et détection des propriétés du style dans un éditeur Wysiwyg).

Merci encore à tous!

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

Geckozone

[Résolu]Problème édition dans iframe en JS

[Résolu]Problème édition dans iframe en JS

Qui est en ligne ?