jQuery et TinyMCE: la valeur textarea ne se soumet pas

J'utilise jQuery et TinyMCE pour soumettre un formulaire, mais il y a un problème de sérialisation en ce que la valeur Textarea ne s'affiche pas.

Voici le code:

<form id="myForm" method="post" action="post.php">
    <textarea name="question_text" id="question_text" style="width:543px;height:250px;"></textarea>
</form>

langue: lang-js

$('#myForm').submit(function() {
    $.ajax({
        type: 'POST',
        url: $(this).attr('action'),
        data: $(this).serialize(),
        success: function(data) {
            $('#result').fadeIn('slow');
            $('#result').html(data);
            $('.loading').hide();
        }
    })
    return false;
});

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "advanced",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,separator,image,separator,justifyleft,justifycenter,justifyright,jformatselect,fontselect,fontsizeselect,justifyfull,bullist,numlist,undo,redo,styleprops,cite,link,unlink,media,advhr,code,preview",
    theme_advanced_buttons2 : "",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resize_horizontal : false,
    theme_advanced_resizing : true,
    extended_valid_elements :"a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
});

Pouvez-vous m'expliquer ce que je devrais changer, et pourquoi, afin que la valeur dans la zone de texte soit publiée?

Avant de soumettre le formulaire, appelez tinyMCE.triggerSave();

Vous pouvez configurer TinyMCE comme suit pour synchroniser les valeurs des zones de texte masquées lorsque les modifications sont effectuées via les éditeurs TinyMCE:

tinymce.init({
    selector: "textarea",
    setup: function (editor) {
        editor.on('change', function () {
            editor.save();
        });
    }
});

Les éléments textarea seront automatiquement mis à jour et vous n'aurez besoin d'aucune étape supplémentaire avant de sérialiser les formulaires, etc.

Cela a été testé sur TinyMCE 4.0

Démo en cours d'exécution sur: http://jsfiddle.net/9euk9/49/

Mise à jour: le code ci-dessus a été mis à jour en fonction du commentaire de DOOManiac

À partir des formulaires TinyMCE, jQuery et Ajax :

Soumission du formulaire TinyMCE

• Lorsqu'une zone de texte est remplacée par TinyMCE, elle est en fait masquée et l'éditeur TinyMCE (un iframe) s'affiche à la place.

• Cependant, c'est le contenu de cette zone de texte qui est envoyé lorsque le formulaire est soumis. Par conséquent, son contenu doit être mis à jour avant la soumission du formulaire.

• Pour une soumission de formulaire standard, elle est gérée par TinyMCE. Pour une soumission de formulaire Ajax, vous devez le faire manuellement, en appelant (avant que le formulaire ne soit soumis):

  tinyMCE.triggerSave();

$('form').bind('form-pre-serialize', function(e) {
    tinyMCE.triggerSave();
});

C'est parce que ce n'est plus une zone de texte. Il est remplacé par un iframe (et autres), et la fonction de sérialisation n'obtient que les données des champs de formulaire.

Ajoutez un champ masqué au formulaire:

<input type="hidden" id="question_html" name="question_html" />

Avant de publier le formulaire, récupérez les données de l'éditeur et mettez dans le champ masqué:

$('#question_html').val(tinyMCE.get('question_text').getContent());

(L'éditeur s'en chargerait bien sûr lui-même si vous publiez le formulaire normalement, mais comme vous grattez le formulaire et envoyez vous-même les données sans utiliser le formulaire, l'événement onsubmit sur le formulaire n'est jamais déclenché.)

Lorsque vous exécutez ajax sur votre formulaire, vous devez d'abord demander à TinyMCE de mettre à jour votre zone de texte:

// TinyMCE will now save the data into textarea
tinyMCE.triggerSave(); 
// now grap the data
var form_data = form.serialize(); 

J'ai utilisé:

var save_and_add = function(){
    tinyMCE.triggerSave();
    $('.new_multi_text_block_item').submit();
};

C'est tout ce que vous devez faire.

Cela garantira que le contenu est enregistré lorsque vous perdez le focus de la zone de texte

 setup: function (editor) {
                editor.on('change', function () {
                    tinymce.triggerSave();
                });

var text = tinyMCE.activeEditor.getContent();
$('#textareaid').remove();
$('<textarea id="textareaid" name="textareaid">'+text+'</textarea>').insertAfter($('[name=someinput]'));

Vous pouvez également simplement utiliser le plugin et le package jQuery pour TinyMCE pour résoudre ce type de problèmes.

J'ai eu ce problème pendant un moment et je triggerSave()n'ai pas fonctionné, ni aucune des autres méthodes.

J'ai donc trouvé un moyen qui fonctionnait pour moi (j'ajoute ceci ici car d'autres personnes ont peut-être déjà essayé triggerSave et etc ...):

tinyMCE.init({
   selector: '.tinymce', // This is my <textarea> class
   setup : function(ed) {
                  ed.on('change', function(e) {
                     // This will print out all your content in the tinyMce box
                     console.log('the content '+ed.getContent());
                     // Your text from the tinyMce box will now be passed to your  text area ... 
                     $(".tinymce").text(ed.getContent()); 
                  });
            }
   ... Your other tinyMce settings ...
});

Lorsque vous soumettez votre formulaire ou quoi que ce soit, tout ce que vous avez à faire est de récupérer les données de votre sélecteur (dans mon cas :) en .tinymceutilisant $('.tinymce').text().

@eldar: J'ai eu le même problème avec 3.6.7 fonctionnant en «mode normal»; et ni triggerSave ni save () ne fonctionnaient.

J'ai changé pour le plugin jQuery TinyMCE et sans avoir à faire autre chose, il fonctionne maintenant. Je suppose que quelque part le long de la ligne, ils ont implémenté une sorte de déclencheur automatique pour la version jQuery de TinyMCE.

Je cache juste () le formulaire tinymce et soumet, la valeur modifiée de textarea manquante. J'ai donc ajouté ceci:

$("textarea[id='id_answer']").change(function(){
    var editor_id = $(this).attr('id');
    var editor = tinymce.get(editor_id);
    editor.setContent($(this).val()).save();
});

Ça marche pour moi.

tinyMCE.triggerSave(); semble être la bonne réponse, car elle synchronisera les modifications de l'iFrame vers votre zone de texte.

Pour ajouter aux autres réponses, pourquoi en avez-vous besoin? J'avais utilisé tinyMCE pendant un certain temps et je n'avais pas rencontré de problèmes avec les champs de formulaire qui ne passaient pas. Après quelques recherches, il s'est avéré être leur "correction automatique" des soumissions d'éléments de formulaire, qui est activée par défaut - http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

En gros, ils redéfinissent submitpour appeler à l' triggerSaveavance, mais seulement s'ils n'ont submit pas déjà été redéfinis par autre chose:

if (!n.submit.nodeType && !n.submit.length) {
    t.formElement = n;
    n._mceOldSubmit = n.submit;
    n.submit = function() {
        // Save all instances
        tinymce.triggerSave();
        t.isNotDirty = 1;

        return t.formElement._mceOldSubmit(t.formElement);
    };
}

Donc, si quelque chose d'autre dans votre code (ou dans une autre bibliothèque tierce) submitne fonctionne pas, leur "correction automatique" ne fonctionnera pas et il deviendra nécessaire d'appeler triggerSave.

EDIT: Et en fait, dans le cas du PO, il submitn'est pas du tout appelé. Comme il est ajaxé, cela contourne le "patching automatique" décrit ci-dessus.

Tout d'abord:

1. Vous devez inclure le plugin tinymce jquery dans votre page (jquery.tinymce.min.js)

2. L'un des moyens les plus simples et les plus sûrs est d'utiliser getContentet setContentavec triggerSave. Exemple:

   tinyMCE.get('editor_id').setContent(tinyMCE.get('editor_id').getContent()+_newdata);
   tinyMCE.triggerSave();