jQuery e TinyMCE: o valor textarea não envia

Estou usando jQuery e TinyMCE para enviar um formulário, mas há um problema de serialização porque o valor Textarea não é postado.

Aqui está o 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]",
});

Você pode me explicar o que devo alterar e por quê, para que o valor na área de texto seja postado?

Antes de enviar o formulário, ligue tinyMCE.triggerSave();

Você pode configurar o TinyMCE da seguinte maneira para manter os valores das áreas de texto ocultas em sincronia conforme as alterações são feitas por meio dos editores TinyMCE:

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

Os elementos textarea serão mantidos atualizados automaticamente e você não precisará de nenhuma etapa extra antes de serializar os formulários, etc.

Isso foi testado no TinyMCE 4.0

Demonstração em execução em: http://jsfiddle.net/9euk9/49/

Atualização: O código acima foi atualizado com base no comentário do DOOManiac

Dos formulários TinyMCE, jQuery e Ajax :

Envio de formulário TinyMCE

• Quando uma área de texto é substituída por TinyMCE, ela fica realmente oculta e o editor TinyMCE (um iframe) é exibido.

• No entanto, é o conteúdo desta área de texto que é enviado quando o formulário é enviado. Consequentemente, seu conteúdo deve ser atualizado antes do envio do formulário.

• Para o envio de um formulário padrão, ele é gerenciado pelo TinyMCE. Para o envio de um formulário Ajax, você deve fazer isso manualmente, chamando (antes de o formulário ser enviado):

  tinyMCE.triggerSave();

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

Isso porque não é mais uma área de texto. Ele foi substituído por um iframe (e outros enfeites), e a função de serializar apenas obtém dados dos campos do formulário.

Adicione um campo oculto ao formulário:

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

Antes de postar o formulário, pegue os dados do editor e coloque no campo oculto:

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

(O editor, é claro, cuidaria disso sozinho se você postasse o formulário normalmente, mas como você está copiando o formulário e enviando os dados sem usar o formulário, o evento onsubmit no formulário nunca é acionado.)

Quando você executa o ajax em seu formulário, você precisa dizer ao TinyMCE para atualizar sua área de texto primeiro:

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

Eu usei:

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

Isso é tudo que você precisa fazer.

Isso irá garantir que o conteúdo seja salvo quando você perder o foco da á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]'));

Você também pode simplesmente usar o plugin jQuery e o pacote para TinyMCE, ele resolve esses tipos de problemas.

Eu tive esse problema por um tempo e triggerSave()não funcionou, nem qualquer um dos outros métodos.

Então, encontrei uma maneira que funcionou para mim (estou adicionando aqui porque outras pessoas podem já ter tentado o triggerSave e 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 ...
});

Quando você está enviando seu formulário ou o que quer que seja, tudo que você precisa fazer é pegar os dados do seu seletor (no meu caso .tinymce:) usando $('.tinymce').text().

@eldar: Eu tive o mesmo problema com o 3.6.7 rodando no 'modo normal'; e nem triggerSave ou save () estavam funcionando.

Mudei para o plugin jQuery TinyMCE e sem fazer mais nada ele está funcionando agora. Estou assumindo que em algum lugar ao longo da linha eles implementaram algum tipo de triggerSave automático para a versão jQuery do TinyMCE.

Acabei de ocultar () o tinymce e enviar o formulário, faltando o valor alterado de textarea. Então eu adicionei isto:

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

Funciona para mim.

tinyMCE.triggerSave(); parece ser a resposta correta, pois sincronizará as alterações do iframe com a área de texto.

Para adicionar às outras respostas - por que você precisa disso? Eu estava usando o tinyMCE por um tempo e não tinha encontrado problemas com campos de formulário que não chegavam. Depois de alguma pesquisa, descobriu-se que era o "patching automático" dos envios de elementos do formulário, que está ativado por padrão - http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

Basicamente, eles redefinem submitpara chamar de triggerSaveantemão, mas apenas se submit ainda não tiver sido redefinido por outra coisa:

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

Então, se algo mais em seu código (ou outra biblioteca de terceiros) está bagunçando submit, seu "patching automático" não funcionará e será necessário chamartriggerSave .

EDIT: E, na verdade, no caso do OP, submitnão está sendo chamado. Como é ajax, isso está contornando o "patch automático" descrito acima.

Em primeiro lugar:

1. Você deve incluir o plugin tinymce jquery em sua página (jquery.tinymce.min.js)

2. Uma das formas mais simples e seguras é usar getContente setContentcom triggerSave. Exemplo:

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