Récupérer le contenu d'un textarea depuis une instance CKEDITOR

Version imprimable

Bonjour ici !

Petit up du sujet, je vous remercie par avance pour l'aide que vous m'apporterez.
J'ai un petit problème pour récupérer le texte présent dans mon champs textarea tout ce passe bien sans Ckeditor
mais dès que je le met il m'est impossible de récupérer le contenu, j'ai eu beau essayer toutes les solutions trouver
à droite à gauche, mais je ne m'en sort pas :(

le formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
<form name="formulaire" id="monForm" action="<? echo $rootpath; ?>post.php?action=repondre&t=331" method="post">
 <textarea cols="80" rows="8" id="message" name="message"></textarea>
                        <script type="text/javascript">
                        var editor = CKEDITOR.replace( 'message', 
                        {
                            toolbar: 'MyToolbar',
                            height: '600px',
                            resize_enabled: false
                        });
                        </script>
<input type="submit" class="btn btn-success" name="envoyer" value="Envoyer" />

et le jquery :

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
$(document).ready(function() {
    // Lorsque je soumets le formulaire
    $('#monForm').on('submit', function(e) {
        e.preventDefault(); // J'empêche le comportement par défaut du navigateur, c-à-d de soumettre le formulaire
 
        var $this = $(this); // L'objet jQuery du formulaire
 
        // Je récupère les valeurs
        //var message = $('#message').val(); // marche sans ckeditor
        //var message =  editor.getData();
        var message = CKEDITOR.instances['message'].getData();
 
        // Je vérifie une première fois pour ne pas lancer la requête HTTP
        // si je sais que mon PHP renverra une erreur
        if(message === '') {
            alert('Les champs doivent êtres remplis');
        } else {
            // Envoi de la requête HTTP en mode asynchrone
            $.ajax({
                url: $this.attr('action'), // Le nom du fichier indiqué dans le formulaire
                type: $this.attr('method'), // La méthode indiquée dans le formulaire (get ou post)
                data: $this.serialize(), // Je sérialise les données (j'envoie toutes les valeurs présentes dans le formulaire)
                success: function(html) { // Je récupère la réponse du fichier PHP
                    alert(html); // J'affiche cette réponse
                }
            });
        }
    });
});

Petite précision j'utilise CKEDITOR 4 ! Merci par avance =)

11/08/2015, 22h58
Netyoko

Je viens de voir que le topic avait été déplacé, techniquement l'ajax fonctionne,
le problème c'est de récupérer le contenu du textarea provenant de CKEDITOR =)
Si jamais vous avez l'info j'ai eu beau tout essayé j'en suis encore au même point ...
11/08/2015, 23h41
Netyoko
J'ai fais un test
Code:

1 2 var message = CKEDITOR.instances['message'].getData(); alert(message);
qui me retourne bien le contenu de l'instance, il y a donc effectivement un problème avec la transmission "post" des infos !

Finalement le problème venait de

Code:

data: $this.serialize()

il suffisait de passer les variables normalement ! solution ci-dessous ...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$('#send2').click(function(e) {
        e.preventDefault(); // J'empêche le comportement par défaut du navigateur, c-à-d de soumettre le formulaire
        var $this = $('#monForm'); // L'objet jQuery du formulaire
        var send2 = $(this).val();
        var message = encodeURIComponent(CKEDITOR.instances['message'].getData()); //On recupere le contenu de l'instance CKEditor
        if(message === '') {
            alert('Les champs doivent êtres remplis');
        } 
            // Envoi de la requête HTTP en mode asynchrone
            $.ajaxSetup({async: false});
            $.ajax({
                url: $this.attr('action'), // Le nom du fichier indiqué dans le formulaire
                type: $this.attr('method'), // La méthode indiquée dans le formulaire (get ou post)
                data : 'message=' + message + '&send=' + send2,
                success: function(data) { // Je récupère la réponse du fichier PHP
                    for ( instance in CKEDITOR.instances ){//Suppression du contenu de l'instance CKEditor
                        CKEDITOR.instances['message'].updateElement();
                        }
                        CKEDITOR.instances['message'].setData('');
                }
            });
        });

19/08/2015, 00h55
ABCIWEB

Oui faut être prudent avec l'utilisation des raccourcis. Par exemple serialize() ne transmet pas non plus les champs avec la notation tableau... Finalement cette fonction que l'on voit beaucoup en exemple ne convient que pour des utilisations très basiques.