CSS, iframe et editeur WYSIWYG

Version imprimable

06/07/2006, 10h23
Bacteries

CSS, iframe et editeur WYSIWYG

Petite question :

J'ai une iframe pour un éditeur WYSIWYG (basé sur MIDAS, démo ici, le problème c'est que dans mon iframe j'ai pas la mise en forme de ma page mais celle standard (lien souligné en bleu, ...), comment appliquer la CSS de ma page à l'iframe?
Directement via une proprieté de l'iframe? Via une commande javascript permetant d'appliquer une feuille de style à ma page (document.stylesheets, tenté sans succés)?
Ou autre?

J'ai également un autre problème, j'ai forcément un <br> quand je récupère la valeur de mon iframe, un moyen d'empécher ça ou je dois le supprimer quand je récupère sa valeur?

(j'ai hésité à poster ça dans le forum html, css, ... mais vu que le code est principalement du js, je pense que la solution viendra du js)

Merci
06/07/2006, 17h22
tthierry

la seule solution que j'ai trouvé est de créer une balise link à l''intérieur du head de l'iframe grâce au dom.

l'url du css est absolue, mais les liens commençant par 'http://' restent en bleu (pas les autres).

s'il y a plus simple je veux bien...

+
06/07/2006, 17h49
Bacteries

Oui ça c'est dans le cas où dans ton iframe tu as une page html non?

Car là dans mon iframe j'ai pas de balise <head> ou <html> mais que du texte que j'édite comme je veux.

L'iframe editable est utilisée comme un textarea dans lequel tu met en forme ton code sans passer par du BBCode ou autre.

Je sais qu'il existe des solutions similaire comme FCKeditor mais je voudrais ne pas utiliser ce genre de machine à gaz. Et ce genre d'éditeur est utilisé ailleur (comme gmail) donc y'a certainement moyen... :-/
06/07/2006, 17h54
tthierry

ton iframe est une page html.

lorsque tu passe l'iframe en mode édition il y a des chance que tu place le code a l'intérieur du body de ton iframe.

pour t'en convaincre jettes un coup d'oeil à l'aide de l'inspecteur dom ;)
06/07/2006, 18h00
Bacteries

Je vais regarder, mais pourquoi dans ce cas quand je récupére mon texte je n'ai pas les balises habiteuls d'une page html?
06/07/2006, 18h09
tthierry

>pourquoi dans ce cas quand je récupére mon texte je n'ai pas les balises habiteuls d'une page html?

parce qu'il y a des chances que tu récupères l'intérieur du body.

files toujours ton code d'initialisation peut-être que tu procèdes différemment.
06/07/2006, 18h36
Bacteries

j'utilise cette ligne :
document.getElementById(idFrame).contentWindow.document.designMode = "on";

Mais dans l'inspecteur DOM j'ai effectivement le HTML, HEAD et BODY, faut donc que je rajoute le LINK?

(par contre dans le head j'ai ça :

Citation:

<HEAD>
<TITLE>
404 Not Found </TITLE>
</HEAD>

)

Vais tester. Merci
06/07/2006, 19h08
tthierry

pour ie vaut mieux insérer la balise link après le passage en designmode pour qu'il la garde.

si tu connais pas regardes toujours ici :
http://www.ibilab.net/webdev/article...g-bases-10.htm

ps: si tu mets un src à ton iframe alors tu ne devrais pas en avoir besoin.

J'ai fais des essais, mais en vain.

Voilà mon code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function Start(idFrame) { edoc = document.getElementById(idFrame).contentDocument if(edoc.designMode != 'On') edoc.designMode = 'On'; if(!edoc.body) { setTimeout('Start('+idFrame+')',20); } else { edoc.body.innerHTML = ""; } var doc = document.getElementById(idFrame).contentWindow.document; var head = document.getElementsByTagName('head')[0]; var linkcss = document.createElement('link'); linkcss.href = "css/cssindex.php"; linkcss.rel = "stylesheet"; linkcss.type = "text/css"; head.appendChild(linkcss);
En utilisant Venkman comme debugger les infos sont bonnes, y'a même dans la variable doc déjà un lien vers la bonne feuille de style.

Mais dans l'inspecteur DOM de Firefox je n'ai dans head qu'une balise title (404 en plus).

Donc là je capte pas trop :-/ Mon code (pas encore nettoyé) me semble correct mais dans l'iframe j'ai toujours la mise en page par défaut du navigateur... et pas celle de ma CSS.

>dans l'inspecteur DOM de Firefox je n'ai dans head qu'une balise title (404 en plus).

le head auquel tu ajoutes la balise n'est pas celui de ton iframe, mais celui de ta page principale...et vaut mieux mettre un chemin absolu pour la feuille de style.

pour le 404 est ce que tu mets un src à l'iframe ?

sinon voilà le code que j'utilise :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 edoc=document.getElementById(nom_editeur).contentDocument; //pour ff edoc=window.frames[nom_editeur].document; //pour ie //initialisation... var hd=edoc.documentElement.firstChild; //balise head de l'iframe var lnk=edoc.createElement("link"); lnk.setAttribute('rel','stylesheet'); lnk.setAttribute('type','text/css'); lnk.setAttribute('href','http://toto.fr/style.css'); hd.appendChild(lnk);

09/07/2006, 11h14
Bacteries

Ca marche, merci!

Et en effet je viens de voir mon erreur, arghhh la tête dans le guidon j'ai pas vu.

Encore merci.

(par contre mes liens restes bleus, mais le reste marche)

Je reviens sur ce problème (désolé). Ca marche niquel sous Firefox cependant sous IE j'ai un problème, la CSS n'est pas appliquée à l'iframe, sauf si je met un alert juste avant le code.

Donc je pense que ça vient du fait qu'il est nécessaire d'attendre pour certains navigateur, mais ce problème est normalement contourner avec setTimeout je pense.

Voilà l'extrait de code :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 function Start(idFrame, idTextarea) { var edoc; if(IE) { edoc = window.frames[idFrame].document; //pour ie } else { edoc = document.getElementById(idFrame).contentDocument; //pour ff } if(edoc.designMode != 'On') edoc.designMode = 'On'; //alert("---"); if(!edoc.body) { setTimeout("Start("+idFrame+","+idTexarea+")",20); } else { edoc.body.innerHTML = document.getElementById(idTextarea).value; } //initialisation... var hd=edoc.documentElement.firstChild; //balise head de l'iframe var lnk=edoc.createElement("link"); lnk.setAttribute('rel','stylesheet'); lnk.setAttribute('type','text/css'); lnk.setAttribute('href','http://www.metalorgie.com/metadmin/css/cssindex.php'); hd.appendChild(lnk);
Lorsque j'enléve le commentaire sur le alert() ça passe sous IE aussi. Quelqu'un aurait une idée?

Merci.

essaies ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
function Start(idFrame, idTextarea) {	
 
  var edoc;
 
  if(IE)
  {
  	edoc = window.frames[idFrame].document; //pour ie
  }
  else
  {
  	edoc = document.getElementById(idFrame).contentDocument; //pour ff
  }
 
 
  if(edoc.designMode != 'On') edoc.designMode = 'On';
 
  //alert("---");
 
  if(!edoc.body)
  {
    setTimeout("Start("+idFrame+","+idTexarea+")",20);
  } 
  else 
  {
    ajoute_css(edoc);
    edoc.body.innerHTML = document.getElementById(idTextarea).value;
  }
 
function ajoute_css(edoc) {  
  var hd=edoc.documentElement.firstChild; //balise head de l'iframe
  var lnk=edoc.createElement("link");
 
  lnk.setAttribute('rel','stylesheet');
  lnk.setAttribute('type','text/css');
  lnk.setAttribute('href','http://www.metalorgie.com/metadmin/css/cssindex.php');
  hd.appendChild(lnk); 
}

avec les fonctions retardateurs le code qui suit l'appel est exécuté, en gros tu incluais toujours un css quelque soit la valeur de "edoc.body"....peut-être que ça peut perturber ie...

...et puis j'ajoute le css avant de remplir le body de l'iframe.

+

23/07/2006, 21h36
Bacteries

Non toujours le même problème.

Sous Firefox ça marche, lorsque je tape du texte dès que l'iframe est dispo il n'est pas mis en forme mais l'est au bout de quelques secondes.

Sous IE ça ne marche que si il y a un alert("");
23/07/2006, 21h45
melhima

Je me permet de t'envoyer un mail pour demander un petit conseil.
j'ai un calendrier (calendrier.htm) ou j'ai les réservations des chambres d'un hotel.
Pour simuler :
Donc le client sélectionne dans une liste de choix la chambre (1,2,3...) du fichier calendrier.htm,
et je voudrais que ça actualise le calendrier.
J'ai un fichier .js ou il y a les jour ou les chambres sont déja réservées.
J'ai également un autre fichier (flato.htm) ou en fait j'aimerais réceptionner cet variable car c'est ce fichier qui va m'actualise le calendrier.
Donc si par exemple dans le fichier flato.htm je met "var suite=1ou2ou3...;" ça marche, donc en fait il faudrait juste créer un code qui aprés la sélection de la chambre dans le calendrier.htm envoi automatiquement la variable pour indiquer le numero de suite.
Dans mon fichier flato.htm je mets "var suite=variable reçu" pour que ça marche

J'espere ne pas vous avoir embrouiller
Je remercie par avance la bonne ame qui me depannerais
23/07/2006, 21h49
Bacteries

melhima> Créé un sujet tu auras plus de réponse.
23/07/2006, 21h58
tthierry
le problème c'est que chez moi ça marche bien comme ça :)

sinon t'es sûr de ton setTimeout(), je n'ai jamais réussi à le faire fonctionner avec cette syntaxe, j'utilise plutôt celle ci :
Code:

1 2 setTimeout(function() { Start(idFrame,idTextarea) },20);
ps : j'ai enlevé le ajoute_css() en trop dans le post précedent.
23/07/2006, 22h02
Bacteries
Citation:
Envoyé par tthierry

le problème c'est que chez moi ça marche bien comme ça :)

sinon t'es sûr de ton setTimeout(), je n'ai jamais réussi à le faire fonctionner avec cette syntaxe, j'utilise plutôt celle ci :

Code:

1 2 setTimeout(function() { Start(idFrame,idTextarea) },20);

ps : j'ai enlevé le ajoute_css() en trop dans le post précedent.
Bah voilà c'était ça!

Encore merci à toi 8-)
23/07/2006, 22h06
tthierry

>Encore merci à toi

bah, avec ton histoire d'alert ça m'a permis de résoudre un problème que j'avais sur un dev ;)

+
23/07/2006, 22h10
Bacteries

Eh eh, bah content d'être tout de même utile ;)