Comment ajax-soumettre une entrée de zone de texte de formulaire à partir de CKEditor?

Question

J'utilise CKEditor, jQuery et le plugin de formulaire jQuery et je voudrais soumettre le contenu du formulaire CkEditor via une requête Ajax. Voici mon code:

 <form id="article-form" name="article-form" method="post" action="/myproject/save">
  <textarea name="bodyText" style="visibility: hidden; display: none;"></textarea>
  <script type="text/javascript">
    CKEDITOR.replace('bodyText');
  </script>

  <a onClick="$("#article-form").ajaxSubmit();">Submit</a>

</form>
 

Malheureusement, il semble que la requête Ajax ne passe pas le paramètre bodyText ;

Qu'est-ce que j'ai fait de mal ou comment puis-je obtenir ce dont j'ai besoin?

Merci.

Answer 1

vous devez d'abord appeler ce qui suit pour que les CKEDITOR mettent à jour leurs champs associés.

 for ( instance in CKEDITOR.instances )
    CKEDITOR.instances[instance].updateElement();
 

alors

HTML

 <a onClick="CKupdate();$("#article-form").ajaxSubmit();">Submit</a>
 

et javascript

 function CKupdate(){
    for ( instance in CKEDITOR.instances )
        CKEDITOR.instances[instance].updateElement();
}
 

Answer 2

Cela fonctionne le mieux pour moi: beforeSerialize callback

 $('form#description').ajaxForm({
    beforeSerialize:function($Form, options){
        /* Before serialize */
        for ( instance in CKEDITOR.instances ) {
            CKEDITOR.instances[instance].updateElement();
        }
        return true; 
    },
    // other options
});
 

Answer 3

Si vous utilisez le plugin de formulaire jQuery , vous pouvez utiliser l'option beforeSubmit pour une solution plus élégante:

 $("#form").ajaxForm({
    beforeSubmit:  function()
{
        /* Before submit */
    for ( instance in CKEDITOR.instances )
    {
        CKEDITOR.instances[instance].updateElement();
    }
},

  // ... other options
});
 

Answer 4

Dans mon cas, ce qui suit m'a aidé, j'utilise simplement ces deux lignes avant de saisir le formulaire:

 for ( instance in CKEDITOR.instances )
     CKEDITOR.instances[instance].updateElement();

var data = $('#myForm').serializeArray();
 

Answer 5

J'ai essayé quelque chose comme ça:

J'ai d'abord dû mettre un id = "#myForm" sur @ Html.BeginForm ensuite, je les ai mis dans ma partie scripts où j'utilise le script:

 <script type="text/javascript">
    $(document).ready(function CKupdate() {
        $('#myForm').ajaxForm(function () {
            for (instance in CKEDITOR.instances) {
                CKEDITOR.instances[instance].updateElement();
            }
        });       
    });
</script>
 

puis j'ai fait quelque chose comme ceci =] pour mon bouton d'envoi et cela fonctionne très bien pour moi, plus besoin d'appuyer deux fois sur le bouton Soumettre =]

 <button type="submit" id="submitButton" onclick="CKupdate();$('#myForm').ajaxSubmit();">Submit</button>