jQuery y TinyMCE: el valor del área de texto no se envía

Estoy usando jQuery y TinyMCE para enviar un formulario, pero hay un problema en la serialización porque el valor de Textarea no se publica.

Aquí está el código:

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

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

¿Puede explicarme qué debo cambiar y por qué, para poder publicar el valor en el área de texto?

Antes de enviar el formulario, llame tinyMCE.triggerSave();

Puede configurar TinyMCE de la siguiente manera para mantener sincronizados los valores de las áreas de texto ocultas a medida que se realizan cambios a través de los editores de TinyMCE:

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

Los elementos del área de texto se mantendrán actualizados automáticamente y no necesitará ningún paso adicional antes de serializar formularios, etc.

Esto ha sido probado en TinyMCE 4.0

La demostración se ejecuta en: http://jsfiddle.net/9euk9/49/

Actualización: el código anterior se ha actualizado en función del comentario de DOOManiac

Desde los formularios TinyMCE, jQuery y Ajax :

Envío del formulario TinyMCE

• Cuando un área de texto es reemplazada por TinyMCE, en realidad está oculta y en su lugar se muestra el editor TinyMCE (un iframe).

• Sin embargo, es el contenido de este área de texto el que se envía cuando se envía el formulario. En consecuencia, su contenido debe actualizarse antes del envío del formulario.

• Para el envío de un formulario estándar, lo maneja TinyMCE. Para el envío de un formulario Ajax, debe hacerlo manualmente, llamando (antes de enviar el formulario):

  tinyMCE.triggerSave();

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

Eso es porque ya no es un área de texto. Se reemplaza con un iframe (y todo eso), y la función serializar solo obtiene datos de los campos del formulario.

Agregue un campo oculto al formulario:

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

Antes de publicar el formulario, obtenga los datos del editor y colóquelos en el campo oculto:

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

(El editor, por supuesto, se ocuparía de esto si publicara el formulario normalmente, pero como está raspando el formulario y enviando los datos usted mismo sin usar el formulario, el evento onsubmit en el formulario nunca se activa).

Cuando ejecuta ajax en su formulario, primero debe decirle a TinyMCE que actualice su área de texto:

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

Solía:

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

Esto es todo lo que necesitas hacer.

Esto asegurará que el contenido se guarde cuando pierda el foco del área de texto.

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

También puede simplemente usar el complemento jQuery y el paquete para TinyMCE para resolver este tipo de problemas.

Tuve este problema por un tiempo y triggerSave()no funcionó, ni ninguno de los otros métodos.

Así que encontré una forma que funcionó para mí (estoy agregando esto aquí porque otras personas pueden haber probado triggerSave y 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 ...
});

Cuando envía su formulario o lo que sea, todo lo que tiene que hacer es tomar los datos de su selector (en mi caso :) .tinymceusando $('.tinymce').text().

@eldar: Tuve el mismo problema con 3.6.7 ejecutándose en 'modo normal'; y ni triggerSave ni save () estaban funcionando.

Cambié al complemento jQuery TinyMCE y sin tener que hacer nada más está funcionando ahora. Supongo que en algún momento implementaron algún tipo de triggerSave automático para la versión jQuery de TinyMCE.

Simplemente oculto () el formulario tinymce y envío, falta el valor cambiado del área de texto. Entonces agregué esto:

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

Esto funciona para mi.

tinyMCE.triggerSave(); parece ser la respuesta correcta, ya que sincronizará los cambios del iFrame con su área de texto.

Sin embargo, para agregar a las otras respuestas, ¿por qué necesita esto? Había estado usando tinyMCE por un tiempo y no había tenido problemas con los campos de formulario que no aparecían. Después de algunas investigaciones, resultó ser su "parche automático" de los envíos de elementos de formulario, que está activado de forma predeterminada: http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

Básicamente, se redefinen submitpara llamar de triggerSaveantemano, pero solo si submit no ha sido redefinido por otra cosa:

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

Por lo tanto, si algo más en su código (u otra biblioteca de terceros) está jugando submit, su "parcheo automático" no funcionará y será necesario llamar triggerSave.

EDITAR: Y en realidad, en el caso del OP, submitno se llama en absoluto. Dado que es ajax, esto está pasando por alto el "parche automático" descrito anteriormente.

Ante todo:

1. Debe incluir el complemento tinymce jquery en su página (jquery.tinymce.min.js)

2. Una de las formas más sencillas y seguras es utilizar getContenty setContentcon triggerSave. Ejemplo:

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