jQuery e TinyMCE: il valore textarea non viene inviato

Sto usando jQuery e TinyMCE per inviare un modulo, ma c'è un problema nella serializzazione in quanto il valore Textarea non viene pubblicato.

Ecco il codice:

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

lingua: 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]",
});

Puoi spiegarmi cosa dovrei cambiare e perché per ottenere il valore nell'area di testo pubblicato?

Prima di inviare il modulo, chiamare tinyMCE.triggerSave();

Puoi configurare TinyMCE come segue per mantenere sincronizzati i valori delle aree di testo nascoste quando le modifiche vengono apportate tramite gli editor di TinyMCE:

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

Gli elementi dell'area di testo verranno aggiornati automaticamente e non avrai bisogno di passaggi aggiuntivi prima di serializzare i moduli, ecc.

Questo è stato testato su TinyMCE 4.0

Demo in esecuzione su: http://jsfiddle.net/9euk9/49/

Aggiornamento: il codice sopra è stato aggiornato in base al commento di DOOManiac

Dai moduli TinyMCE, jQuery e Ajax :

Invio del modulo TinyMCE

• Quando un'area di testo viene sostituita da TinyMCE, viene effettivamente nascosta e viene invece visualizzato l'editor TinyMCE (un iframe).

• Tuttavia, è il contenuto di questa textarea che viene inviato quando viene inviato il modulo. Di conseguenza il suo contenuto deve essere aggiornato prima dell'invio del modulo.

• Per l'invio di un modulo standard, è gestito da TinyMCE. Per l'invio di un modulo Ajax, devi farlo manualmente, chiamando (prima che il modulo venga inviato):

  tinyMCE.triggerSave();

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

Questo perché non è più un'area di testo. Viene sostituito con un iframe (e quant'altro) e la funzione serialize ottiene solo i dati dai campi del modulo.

Aggiungi un campo nascosto al modulo:

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

Prima di pubblicare il modulo, prendi i dati dall'editor e mettili nel campo nascosto:

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

(L'editor si occuperebbe ovviamente di questo se hai pubblicato il modulo normalmente, ma poiché stai raschiando il modulo e inviando i dati da solo senza utilizzare il modulo, l'evento onsubmit sul modulo non viene mai attivato.)

Quando esegui ajax sul tuo modulo, devi prima dire a TinyMCE di aggiornare la tua textarea:

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

Ero solito:

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

Questo è tutto ciò che devi fare.

Ciò assicurerà che il contenuto venga salvato quando perdi il focus dell'area di testo

 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]'));

Puoi anche usare semplicemente il plug-in e il pacchetto jQuery per TinyMCE per risolvere questo tipo di problemi.

Ho avuto questo problema per un po 'e triggerSave()non ha funzionato, né ha funzionato nessuno degli altri metodi.

Quindi ho trovato un modo che ha funzionato per me (lo aggiungo qui perché altre persone potrebbero aver già provato triggerSave ed ecc ...):

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 ...
});

Quando invii il tuo modulo o qualsiasi altra cosa, tutto ciò che devi fare è prendere i dati dal tuo selettore (nel mio caso :) .tinymceusando $('.tinymce').text().

@eldar: ho avuto lo stesso problema con 3.6.7 in esecuzione in "modalità normale"; e né triggerSave né save () funzionavano.

Sono passato al plug-in jQuery TinyMCE e senza dover fare nient'altro ora funziona. Presumo che da qualche parte lungo la linea abbiano implementato una sorta di trigger automatico per la versione jQuery di TinyMCE.

Ho appena nascosto () il tinymce e invio il modulo, manca il valore modificato di textarea. Quindi ho aggiunto questo:

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

Per me funziona.

tinyMCE.triggerSave(); sembra essere la risposta corretta, poiché sincronizzerà le modifiche dall'iFrame alla tua textarea.

Da aggiungere alle altre risposte, perché ne hai bisogno? Stavo usando tinyMCE da un po 'e non avevo riscontrato problemi con i campi del modulo che non arrivavano. Dopo alcune ricerche, si è scoperto essere il loro "auto patching" degli elementi del modulo inviati, che è attivo per impostazione predefinita - http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

Fondamentalmente, ridefiniscono submitper chiamare in triggerSaveanticipo, ma solo se submit non è già stato ridefinito da qualcos'altro:

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);
    };
}

Quindi, se qualcos'altro nel tuo codice (o in un'altra libreria di terze parti) sta scherzando submit, il loro "auto patching" non funzionerà e sarà necessario chiamare triggerSave.

EDIT: E in realtà nel caso dell'OP, submitnon viene affatto chiamato. Poiché è ajax'd, questo ignora l '"auto patching" descritto sopra.

Prima di tutto:

1. Devi includere il plugin jquery tinymce nella tua pagina (jquery.tinymce.min.js)

2. Uno dei modi più semplici e sicuri è usare getContente setContentcon triggerSave. Esempio:

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