Sujet Précédent Sujet Suivant

Wysiwyg inserer du texte directement dans iframe

Résolu
cs_jerame Messages postés 33 Date d'inscription jeudi 16 septembre 2004 Statut Membre Dernière intervention 28 novembre 2005 - 20 juil. 2005 à 12:35
Eowina Messages postés 1 Date d'inscription lundi 14 mars 2011 Statut Membre 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

10 réponses

Réponse 1 / 10
coucou747 Messages postés 12303 Date d'inscription mardi 10 février 2004 Statut Membre Dernière intervention 30 juillet 2012 44
21 juil. 2005 à 20:36
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
3
Réponse 2 / 10
coucou747 Messages postés 12303 Date d'inscription mardi 10 février 2004 Statut Membre Dernière intervention 30 juillet 2012 44
20 juil. 2005 à 20:57
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
0
Réponse 3 / 10
cs_jerame Messages postés 33 Date d'inscription jeudi 16 septembre 2004 Statut Membre Dernière intervention 28 novembre 2005
20 juil. 2005 à 21:09
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();

}
0
Réponse 4 / 10
coucou747 Messages postés 12303 Date d'inscription mardi 10 février 2004 Statut Membre Dernière intervention 30 juillet 2012 44
20 juil. 2005 à 21:48
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
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 10
cs_jerame Messages postés 33 Date d'inscription jeudi 16 septembre 2004 Statut Membre Dernière intervention 28 novembre 2005
20 juil. 2005 à 22:22
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
0
Réponse 6 / 10
coucou747 Messages postés 12303 Date d'inscription mardi 10 février 2004 Statut Membre Dernière intervention 30 juillet 2012 44
21 juil. 2005 à 08:26
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
0
Réponse 7 / 10
cs_jerame Messages postés 33 Date d'inscription jeudi 16 septembre 2004 Statut Membre Dernière intervention 28 novembre 2005
21 juil. 2005 à 10:18
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();

}
0
Réponse 8 / 10
cs_jerame Messages postés 33 Date d'inscription jeudi 16 septembre 2004 Statut Membre Dernière intervention 28 novembre 2005
21 juil. 2005 à 15:51
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 ??
0
Réponse 9 / 10
cs_jerame Messages postés 33 Date d'inscription jeudi 16 septembre 2004 Statut Membre Dernière intervention 28 novembre 2005
22 juil. 2005 à 01:04
En tout les cas :


merci pour ton aide
0
Réponse 10 / 10
Eowina Messages postés 1 Date d'inscription lundi 14 mars 2011 Statut Membre Dernière intervention 14 mars 2011
14 mars 2011 à 18:01
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.
0

Discussions similaires

génerateur de nombre aléatoire
cs_samnick -
rt15 -

8 réponses
Générateur de regles de jeu...
gully07 -
gully07 -

4 réponses
générer une grille de mots mêlés
orangin12FR -
orangin12FR -

2 réponses
Générateur de chiffres et des lettres
Secondary117 -
Secondary117 -

9 réponses
Acceder aux éléments d'un iframe via le DOM
Pinky84 -
Pinky84 -

2 réponses
Rejoignez-nous