AJAX + TinyMCE :'( :'( :'(
Bonjouuuuur,
Voilà je vous explique : J'essaye de combiner TinyMce et de l'AJAX, malheureusement le champ Content (cf code) est vide la première fois que j'enregistre mon formulaire, ça vient d'un conflit entre AJAX et TinyMCE, je n'arrive malheureusement pas à le résoudre, merci de votre aide :)
<?= $this->Form->create('Page'); ?>
<?= $this->Form->input('title', array('type' => 'text', 'label' => 'Titre')); ?>
<?= $this->Form->textarea('content', array('width' => '100%', 'label' => 'Contenu')); ?>
<?= $this->Form->input('online', array('type' => 'checkbox', 'label' => 'En ligne ?')); ?>
<?= $this->Form->end( array('value' => 'Enregistrer la page','id' => 'submit')); ?>
<div id="resultat">
</div>
<?= $this->Html->scriptStart(); ?>
jQuery(function(){
$("#PageAdminCreateForm").submit(function(){
var online = $("#PageOnline").val(), title = $("#PageTitle").val(), content = $("#PageContent").val();
$.post(
'#',
{
online: online,
title: title,
content: content,
},
function(data){
if(data == 'success'){
$("#resultat").html("<p>La page a bien été enregistrée</p>");
}
else{
$("#resultat").html("<p>Erreur lors de l'enregistrement</p>");
}
},
'text'
);
return false;
});
});
<?= $this->Html->scriptEnd(); ?>Merci de votre aide !
8 réponses
J'ai trouvé d'où venait le problème, le combat était rude, trois combattant : CakePHP, AJAX et TinyMCE ! En tout cas merci de votre aide :)
Le soucis venait du nom du champ : 'content' n'était pas son nom, mais sous format cakePHP c'est à dire : data[Page][content]
Cordialement,
MrFiz
As-tu une erreur dans la console Javascript qui indiquerai un conflit ?
Sinon je te suggère, pour commencer, de faire un console log sur tes variables, ce qui t'indiquera si le contenu est au moins récupéré, ou si le problème se situe sur l'Ajax.
La façon dont tu initialise jQuery devrait en effet t'éviter les conflits.
Alors, explication plus poussées !
Toutes mes variables sont bien remplies SAUF content, qui ne fait pas de résistance mais qui est vide du au fait de l'utilisation d'un éditeur WYSIWYG ( en l'occurrence tinyMCE ) donc, en fait il ne récupère pas les données entrées dans le textarea puisque l'éditeur tinyMCE ne les transmets pas en direct mais seulement à la fin, donc après que je clique sur Submit donc après que j'envoie ma requète en AJAX, mon soucis vient donc de là, malheureusement je ne sais pas comment le réglé et c'est bien ça que je cherche, en gros je voudrais pouvoir faire appel au contenu de mon editeur WYSIWYG juste avant de lancer ma requète AAJX donc soit avec une fonction incorporée à l'éditeur soit à l'aide d'un moyen tiers, en tout cas merci de ton aide :)
tinyMCE a une API, pour cela, qui utilise l'ID ou l'éditeur courant:
http://www.tinymce.com/wiki.php/api4:method.tinymce.Editor.getContent
En gros:
tinymce.get('content id').getContent()Bonjour, merci de la réponse, mais quand j'ajoute cette ligne, ma page se réactualise, les données sont donc bien entrées mais grâce au script PHP et non Ajax ^^'
J'avais oublié le fonctionnement de tinyMCE.
Donc MrFiz, le code donné par Vallyan n'est pas à mettre à la place de ton code Javascript, il est à ajouter dedans, en lieu de place de :
content = $("#PageContent").val();Ce bout de code deviendra alors :
content = tinymce.get('#PageContent').getContent();Il y a un truc bizarre dans ton code alors, parce que dans leur page de démo
http://www.tinymce.com/tryit/basic.php, leur textarea a l'id 'content', et si je balance le code suivant en console:
tinyMCE.get('content').getContent(), j'ai bien mon contenu au format html, sans soumission automatique du formulaire.
Petite précision: c'est directement l'id ('centent' en l'occurence), et non le selecteur css ('#content') qu'il faut utiliser.