plugin FCKEditors et UI Dialog

pixworld · 11/05/2011, 16h42

J'ai un champ textarea dans un UI Dialog, je ne parviens pas à poster le contenu du textarea généré par FCKEditor.

voici le code PHP qui me génère mon champ FCK Editor fonctionnel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
	<div class="ligne-form">
		<label for="name">Commentaire :</label>
	<?php
					include("ressources/fckeditor/fckeditor.php");
 
					$oFCKeditor=new FCKeditor('FichCommentaire');
					$oFCKeditor->BasePath="ressources/fckeditor/";
					$oFCKeditor->Config['SkinPath'] = "skins/silver/";
					$oFCKeditor->ToolbarSet="Doc";
					$oFCKeditor->Width=320;
					$oFCKeditor->Height=200;
					if(isset($_GET['FichierId']))
						$oFCKeditor->Value=stripslashes($data_fichier['FichCommentaire']);
					else
						$oFCKeditor->Value="";
					$oFCKeditor->Create();
				?>
	</div>

Je souhaite donc récupérer FichCommentaire, seulement le input hidden de Fckeditor ne se met à jour suite à la saisi de contenu, comment récupérer le contenu de l'iframe.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<div class="ligne-form">
<label for="name">Commentaire :</label>
<input id="FichCommentaire" type="hidden" style="display:none" value="commentaire" name="FichCommentaire">
<input id="FichCommentaire___Config" type="hidden" style="display:none" value="SkinPath=skins/silver/">
<iframe id="FichCommentaire___Frame" width="320" height="200" frameborder="0" scrolling="no" src="ressources/fckeditor/editor/fckeditor.html?InstanceName=FichCommentaire&Toolbar=Doc" style="margin: 0pt; padding: 0pt; border: 0pt none; background-color: transparent; background-image: none; width: 320px; height: 200px;">

sachant que je récupère les éléments en javascript pour une soumission en ajax de la boite de dialogue.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var FichCommentaire=$( "#FichCommentaire" )

Merci.

danielhagnoul · 12/05/2011, 23h29

Bonsoir

Le contenu d'un "iframe" est accessible après le chargement complet de la page, exemple pour un division d'ID "conteneur" :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$(window).load(function(){
	var obj = $("#FichCommentaire___Frame").contents().find("#conteneur");
 
	console.log(obj);
});

pixworld · 16/05/2011, 10h58

bonjour,
quel conteneur dois-je mettre je m'aperçois que j'ai une i-frame dans l'iframe principal.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<div class="ligne-form">
<label for="name">Commentaire :</label>
<input id="FichCommentaire" type="hidden" style="display:none" value="commentaire" name="FichCommentaire">
<input id="FichCommentaire___Config" type="hidden" style="display:none" value="SkinPath=skins/silver/">
<iframe id="FichCommentaire___Frame" width="320" scrolling="no" height="200" frameborder="0" src="ressources/fckeditor/editor/fckeditor.html?InstanceName=FichCommentaire&Toolbar=Doc" style="margin: 0pt; padding: 0pt; border: 0pt none; background-color: transparent; background-image: none; width: 320px; height: 200px;">
<html>
<head>
<body>
<table width="100%" cellspacing="0" cellpadding="0" style="height: 100%; table-layout: fixed">
<tbody>
<tr id="xToolbarRow" style="">
<tr>
<td id="xEditingArea" valign="top" style="height: 100%">
<iframe frameborder="0" style="height: 138px; width: 100%;">
<html dir="ltr">
<head>
<body spellcheck="false">
commentaire
<br _moz_dirty="">
<p>
<strong>gras</strong>
</body>
</html>
</iframe>
</td>
</tr>
</tbody>
</table>
</body>
</html>
</iframe>
</div>

Merci.

danielhagnoul · 16/05/2011, 22h34

Bonsoir

Il m'est impossible de tester votre code, mais j'ai testé le chargement d'une page dans un iframe, cette page contenant un autre iframe. J'ai accès au second iframe sans problème.

Dans votre cas, pour avoir accès au contenu du body du second iframe, je suggère d'essayer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
var obj = $("#FichCommentaire___Frame").contents().find("iframe").contents().find("body");
 
console.log(obj, obj.text(), obj.html());

pixworld · 18/05/2011, 11h27

J'ai mis en place votre solution,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
</script>
<script>
$(window).load(function(){
var FichCommentaire = $("#FichCommentaire___Frame").contents().find("iframe").contents().find("body").html();
console.log(FichCommentaire);
});
</script>

lorsque je fais un alert, il me donne bien le contenu de l'iframe au chargement de la page, mais lorsque je modifie le contenu de l'iframe (FCKeditor), les données envoyés sont celles d'origine.

comment récupérer la valeur pour pouvoir la transmettre en ajax.

merci.

danielhagnoul · 18/05/2011, 22h20

Bonsoir

Le contenu du second iframe est une page web, elle peut charger sa version de jQuery et faire une transaction AJAX.

pixworld · 19/05/2011, 10h17

bonjour,
ce n'est pas clair, pouvez-vous expliquer avec du code ou en évoquant les conteneurs.

Merci.

[Edit] sachant que c'est fckditor qui génère ces 2 i-frames, je n'ai donc pas la main dessus.

Merci.

danielhagnoul · 20/05/2011, 10h50

Bonjour

$(window).load(function(){..}); permets une action dès que la page est construite.

Pour une transaction AJAX, il faut récupérer les données au dernier moment.

Et donc, appeler : var FichCommentaire = $("#FichCommentaire___Frame").contents().find("iframe").contents().find("body").html(); au moment de l'incorporer dans le paramètre data de la transaction AJAX.

Mais je ne sais pas si cela donnera le résultat espéré.

Je n'utilise pas le plugin FCKEditors, mais dès la première page du site, je vois que :

Citation:

It integrates FCKEditors with the jQuery Form Plugin and enables the contents of FCKEditor to be submitted via ajax.

Donc le moyen adéquat de récupérer le contenu via une transaction AJAX est d'utiliser le plugin Form.

Il semblerait que la version récente soit CKEditor

pixworld · 25/05/2011, 19h28

j'utilise le plugin jquery form sur d'autres parties du site, je vais voir pour l'intégrer.

Je teste ça demain.

Merci.

18/05/2011, 22h20	#6
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	Bonsoir Le contenu du second iframe est une page web, elle peut charger sa version de jQuery et faire une transaction AJAX. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

19/05/2011, 10h17	#7
pixworld Futur Membre du Club FX Inscription : juillet 2010 Messages : 75 Détails du profil Informations personnelles : Nom : FX Informations forums : Inscription : juillet 2010 Messages : 75 Points : 17 Points : 17	bonjour, ce n'est pas clair, pouvez-vous expliquer avec du code ou en évoquant les conteneurs. Merci. [Edit] sachant que c'est fckditor qui génère ces 2 i-frames, je n'ai donc pas la main dessus. Merci.
	00

25/05/2011, 19h28	#9
pixworld Futur Membre du Club FX Inscription : juillet 2010 Messages : 75 Détails du profil Informations personnelles : Nom : FX Informations forums : Inscription : juillet 2010 Messages : 75 Points : 17 Points : 17	j'utilise le plugin jquery form sur d'autres parties du site, je vais voir pour l'intégrer. Je teste ça demain. Merci.
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email