FCKeditor + Prototype (AJAX) : Edition de messages multiple

**FMaz** · 27/03/2006, 20h30

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 :

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

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

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 :

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

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** · 27/03/2006, 22h48

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

**FMaz** · 27/03/2006, 22h54

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** · 27/03/2006, 23h01

Code :

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

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

:

**FMaz** · 27/03/2006, 23h07

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** · 27/03/2006, 23h13

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** · 27/03/2006, 23h24

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** · 28/03/2006, 08h57

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

change éventuellement l'appel de SaveChange();

Code :

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

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

**FMaz** · 28/03/2006, 14h32

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

**javatwister** · 28/03/2006, 14h34

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** · 28/03/2006, 17h25

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

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

Donc:

Code :

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

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 :

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

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** · 28/03/2006, 19h10

un peu zarbi...

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

**FMaz** · 28/03/2006, 19h14

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** · 28/03/2006, 19h19

oui oui;

[xhr = ajax]

**FMaz** · 28/03/2006, 19h43

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

**veacks** · 21/02/2007, 22h00

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 :

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
 
//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 :

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

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** · 14/03/2007, 14h18

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 :

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

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 :

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

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** · 14/03/2007, 14h59

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** · 02/11/2009, 14h35

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