Wysiwyg inserer du texte directement dans iframe [Résolu]

Messages postés
33
Date d'inscription
jeudi 16 septembre 2004
Dernière intervention
28 novembre 2005
- - Dernière réponse : Eowina
Messages postés
1
Date d'inscription
lundi 14 mars 2011
Dernière intervention
14 mars 2011
- 14 mars 2011 à 18:01
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
"
" quelque soit le navigateur, au lieu de
 

sous ie.



J'ai essayé d'attaché un evenement onkeypress pour detecter la touche
entrée sous ie et d'inserer
au lieu de
 

, 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
Afficher la suite 

Votre réponse

10 réponses

Meilleure réponse
Messages postés
12336
Date d'inscription
mardi 10 février 2004
Dernière intervention
30 juillet 2012
3
Merci
comment ils font ?

affichage + source...



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

http://coucou747.hopto.org

Merci coucou747 3

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

Codes Sources a aidé 100 internautes ce mois-ci

Commenter la réponse de coucou747
Messages postés
12336
Date d'inscription
mardi 10 février 2004
Dernière intervention
30 juillet 2012
0
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

http://coucou747.hopto.org
Commenter la réponse de coucou747
Messages postés
33
Date d'inscription
jeudi 16 septembre 2004
Dernière intervention
28 novembre 2005
0
Merci
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();

}
Commenter la réponse de cs_jerame
Messages postés
12336
Date d'inscription
mardi 10 février 2004
Dernière intervention
30 juillet 2012
0
Merci
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+"http://coucou747.hopto.org
Commenter la réponse de coucou747
Messages postés
33
Date d'inscription
jeudi 16 septembre 2004
Dernière intervention
28 novembre 2005
0
Merci
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
et non pas
 

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
Commenter la réponse de cs_jerame
Messages postés
12336
Date d'inscription
mardi 10 février 2004
Dernière intervention
30 juillet 2012
0
Merci
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

http://coucou747.hopto.org
Commenter la réponse de coucou747
Messages postés
33
Date d'inscription
jeudi 16 septembre 2004
Dernière intervention
28 novembre 2005
0
Merci
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+""+prompt("texte commentaire du
lien","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 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();

}
Commenter la réponse de cs_jerame
Messages postés
33
Date d'inscription
jeudi 16 septembre 2004
Dernière intervention
28 novembre 2005
0
Merci
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(/&nbsp;<\/P>/i,"");

et que je regarde l'affichage en innerHTML, j'obtient
&nbsp;

, 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 ??
Commenter la réponse de cs_jerame
Messages postés
33
Date d'inscription
jeudi 16 septembre 2004
Dernière intervention
28 novembre 2005
0
Merci
En tout les cas :


merci pour ton aide
Commenter la réponse de cs_jerame
Messages postés
1
Date d'inscription
lundi 14 mars 2011
Dernière intervention
14 mars 2011
0
Merci
Bonjour,

J'ai le même soucis que le jeune homme...
J'aimerais savoir si le problème a été résolu ou si il y a un moyen de le résoudre ?

Merci de votre aide.
Commenter la réponse de Eowina

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.