plugin FCKEditors et UI Dialog

Version imprimable

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:

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:

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:

var FichCommentaire=$( "#FichCommentaire" )

Merci.

13/05/2011, 00h29
danielhagnoul
Bonsoir

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

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

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

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
<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.

16/05/2011, 23h34
danielhagnoul
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:

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

J'ai mis en place votre solution,
Code:

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.

18/05/2011, 23h20
danielhagnoul

Bonsoir

Le contenu du second iframe est une page web, elle peut charger sa version de jQuery et faire une transaction AJAX.
19/05/2011, 11h17
pixworld

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.
20/05/2011, 11h50
danielhagnoul

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
25/05/2011, 20h28
pixworld

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

Je teste ça demain.

Merci.