[Prototype] FCKeditor + Prototype (AJAX) : Edition de messages multiple [Résolu]

[FMaz]

Bon, j'ai essayé de faire un titre clair mais les explications sont innévitables:

Contexte:
Je créer un forum dans lequel les utilisateur clique sur "Modifier message" pour que la zone du message devienne éditable sur le champs. Une fois modifié, l'utilisateur clique sur "Enregistrer les modifications" et le message se sauvegarde et le message s'actualise (le message et non la page).


Scripts utilisés
Pour se faire, j'utilise:
- la librairy Prototype (même si vous ne connaissez-pas, vous pouvez surement aider quand même)
- l'éditeur WYSIWYG nommé FCKeditor


Code d'affichage de la zone d'édition

Voici le code qui est exécuté lorsqu'un utilisateur clique sur "modifier le message":

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
 
 
<div id='divmsg555'>
Ceci est le message innitial non-modifié
<a href="javascript:void(0);" onclick="LoadEditor(555);">Modifier le message</a>
</div>
 
<div id='divmsg554'>
Ceci est le message #2 innitial non-modifié
<a href="javascript:void(0);" onclick="LoadEditor(554);">Modifier le message</a>
</div>
 
<script>
 var CasNo;
 function LoadEditor(msgno){
  CasNo=msgno;
  var myAjax = new Ajax.Updater('divmsg'+msgno, 'http://localhost/4daction/WebBugIndex/?page=modifiermsg&step=1&no='+msgno, {method: 'get', onComplete: LoadModify});
 }
 
 function LoadModify(){
  var sBasePath='/js/';
  var oFCKeditor=new FCKeditor('vpMessage'+CasNo);
  oFCKeditor.BasePath=sBasePath;
  oFCKeditor.ToolbarSet='smi';
  oFCKeditor.ReplaceTextarea();
 }
</script>

La page:
http://localhost/4daction/WebBugIndex/?page=modifiermsg&step=1&no=555
... va retourner une source telle que:

Code :

1
2
3
4
5
6
7
8
9
10
11
12
 
<textarea name="vpMessage555" id="vpMessage555" class="msg">Ceci est le message innitial non-modifié</textarea>
 
   <br />
   <div style="text-align:right;font-size:8pt;margin-right:20px;">
   <strong>Action à effectuer:</strong>&nbsp;&nbsp;
   <a href="javascript:void(0);" onclick="NoChange(555);">Annuler</a>
   &nbsp;
   |
   &nbsp;
   <a href="javascript:void(0);" onclick="SaveChange(555);" style="font-weight:bold;">Sauvegarder</a>
   <div>

Jusqu'ici, tout fonctionne #1

Code de sauvegarde de la zone d'édition

Code :

1
2
3
4
5
 
function SaveChange(nomsg){
   var pars = 'vpMessage='+escape($F("vpMessage"+nomsg));
   var myAjax = new Ajax.Updater('divmsg'+nomsg, 'http://localhost/4daction/WebBugIndex/?page=modifiermsg&step=2s&no='+nomsg, {method: 'post', parameters: pars});   
}

Ici, rien ne va. $F("vpMessage"+nomsg) retourne toujours le message non-modifié, soit: Ceci est le message innitial non-modifié

Je n'arrive pas à récupérer le texte modifié. Avez-vous une idée ?

[javatwister]

et dans pars, tu es censé récupérer la valeur de la zone?

[FMaz]

Exactement, la fonction $F() est équivalente à document.getElementById("...").value


Mais le problème c'est que c'est la valeur INITIALE que ca récupère. je n'ai aucune idée ou FCKeditor s'ammuse à stocker le message modifié... :-\

[javatwister]

Code :

   var pars = escape($F("vpMessage"+nomsg));

:

[FMaz]

http://www.sergiopereira.com/articles/prototype.js.html
^^ Deuxième carré gris foncé: "Using the $F() function".

Si tu préfère, on peux dire que j'Ai ceci comme code, ca reviend au même.

var pars = "vpMessage="+escape(document.getElementById("vpMessage"+nomsg).value);

pars retourne quelque chose comme:
vpMessage=Ceci est mon message

pars est en fait la chaine de toutes les variables que je retourne en post.

[javatwister]

ben alors, vois si Updater traite comme voulu le paramètre "textarea";
j'imagine que tu n'as aucune erreur signalée par ailleurs?

[FMaz]

Non, aucune erreur de pertinente (certaine en CSS et des trucs du genre, mais vraiment vraiment rien de pertinent).

Et je fais c'est que si je fais un:
alert(pars);
juste AVANT le updater, je constate que le message est l'ANCIEN, pas le modifié.

Donc ceci me mène à penser que FCKeditor rend la zone invisible et met la sienne à la place. Sauf que je n'ai AUCUNE idée de comment aller chercher cette valeur.

Aucun expert en FCKeditor dans le coin ?

[javatwister]

bah, effectivement, on ne peut pas dire grand chose sans connaître les fonctions utilisées...

change éventuellement l'appel de SaveChange();

Code :

<a href="#" onclick="SaveChange(555);return false">Sauvegarder</a>

[FMaz]

Quel est l'intérêt du return false; ?

[javatwister]

selon les navigateurs, le"#" en href ne suffit pas à bloquer le lien; là, tu as la garantie de ne pas changer de page sans t'en apercevoir...

[FMaz]

Ok, je pense que j'ai réussit.

FCKeditor transfert la valeur modifié vers le textarea lorsque le form est envoyé seulement.

Donc:

Code :

1
2
3
4
5
6
 
	function SaveChange(nomsg){
		document.forms['modifier_reponse'+nomsg].submit();
		var pars = 'vpMessage='+escape($F("vpMessage"+nomsg));
		var myAjax = new Ajax.Updater('divmsg'+nomsg, 'http://localhost/4daction/WebBugIndex/?page=modifiermsg&step=2s&no='+nomsg, {method: 'post', parameters: pars});		
	}

et, parceque je ne veux pas que le formulaire soit envoyé et change de page, la balise va comme suit:

Code :

1
2
 
<form action="javascript:void(0);" name="modifier_reponse555">

^^ j'ai essayé le truc du onsubmit="fonction_qui_retourne_false();", mais comme FCK surveille l'évènement, ca ne fonctionne pas :-\
Ma méthode est quand même bonne ?

[javatwister]

un peu zarbi...

en fait, xhr et le formulaire font double emploi; mais évidemment, si FCK veut un formulaire et une soumission hein!

[FMaz]

xhr c'est quoi ?

Le truc c'est que FCK fait un addEventListener sur le "onSubmit" d'un formulaire afin de "replacer" la valeur modifié dans la zone de texte juste avant que le formulaire soit soumis.

Et en Ajax, je ne veux PAS envoyer le formulaire. Je veux juste récupérer la valeur modifié de la zone de texte.

[javatwister]

oui oui;

[xhr = ajax]

[FMaz]

Il y a une différence (ou une signification de XHR ) par rapport à AJAX ?

[veacks]

Bonsoir, je sais que j'arrive bien après la bataille, mais j'ai trouvé une solution pour obtenir la valeure ou exécuter des commandes sans avoir à envoyer de formulaire si on implémente FCK en javascript (pour les autres implémentations il suffit de modifier le contexte des fonctions).

Tout ce passe dans le fichier fckeditor.js (ou dans un fichier 'common' pour les autres implémentations):

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
 
//cette fonction référence les objets présents de l'iframe liés aux paramètres et aux commandes dans l'objet FCKeditor.
FCKeditor.prototype._loadFCKInternalParams = function ()
{
	//on va chercher l'iframe
	var iframe = document.getElementById(this.InstanceName + 	'___Frame');
 
	//on va chercher le document
	if (document.all)
		oWinIFrame = iframe;//si IE
	else
		oWinIFrame = iframe.contentWindow;//si non.
 
	//on référence les objets qui nous intéressent (dans ce cas l'objet FCK)
	this.FCKConfig = oWinIFrame.FCKConfig;
	this.FCKCommands = oWinIFrame.FCKCommands;
	this.FCK = oWinIFrame.FCK;
 
	return true;
}
 
//Et voici la fonction qui nous intéresse
FCKeditor.prototype.getValue = function ()
{
	this._loadFCKInternalParams();
	return this.FCK.GetXHTML();
}

Pour profiter de fonction getValue() il suffit de l'associer à une action onClick d'un bouton comme :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
//Création du rich-text
var myFck = new FCKeditor();
 
[...]
 
//Sélection du bouton
var button = document.getElementById('monBouton');
 
button.onclick = function onsenfou ()
{
var value = myFck.getValue();
//envoyer value avec le XHR
}

[atkati]

Je viens de trouver, et je voudrais vous en faire profiter vu que cette discussion m'a mis sur la piste.

En recherchant dans le code de FCKEditor, j'ai trouver qu'il fallait appeler cette fonction :

Code :

FCK.UpdateLinkedField;

C'est tout bête.
Vous faîtes ceci avant d'envoyer votre formulaire AJAX ou autre.
Pour ma part, j'utilise JQuery pour appeler une page de script pour traiter les données du formulaire.

Code :

1
2
3
4
5
6
7
$("#formulaire").submit(function(){
	FCK.UpdateLinkedField;
	$.post(
		"scriptajax.php",
		{ val1: "mavaleur", val2: $("#monchampFCKEditor").val(); }
	);
});

J'ai volontairement zappé du code de mon application, donc ce code ne marche pas tel quel...
Le plus important, c'est la ligne qui est insérée juste avant d'envoyer mes données via la fonction JQuery "post".

En espérant en avoir aidé quelques uns d'entre nous !

[atkati]

Sinon, il y en encore mieux :
http://wiki.fckeditor.net/Troublesho...64b60a41253d76

C'est officiel, et c'est une classe Javascript pour rafraichir tous vos champs FCKEditor en une passe avant d'envoyer une requête AJAX.

[cvneo]

Salut,

tu dit :
Sinon, il y en encore mieux :
http://wiki.fckeditor.net/Troublesho...64b60a41253d76
C'est officiel, et c'est une classe Javascript pour rafraichir tous vos champs FCKEditor en une passe avant d'envoyer une requête AJAX.

Malheureusement le lien a sauté il on tout changer sur leur site A tu garder le principe ou le nom de la class ?

Merci d'avance...

[applejuice]

Ca doit être ce lien...

http://docs.cksource.com/FCKeditor_2...ing#AjaxSubmit