jQuery e TinyMCE: o valor textarea não envia

106

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?

Agus Puryanto
fonte

Respostas:

180

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

eldar
fonte
15
Usando o TinyMCE 3.2+ com o plugin jquery: $('#textarea_id').tinymce().save();no manipulador onSubmit do seu formulário.
Brenden,
@Brenden Estou usando a versão 3.5.8 do tinymce e no console mostra o erro. Tinymce () não é uma função. Resolvi meu problema com o velho
Code Prank
1
Melhor resposta, curta mas doce e também a solução mais limpa. Funciona com vários campos também. A única desvantagem é que isso ativa a economia de todos os elementos.
Hugo Zink
tinymce.init ({seletor: 'textarea'});
suraj
Dan Malcolm tem a melhor resposta para a versão atual - por favor, veja a postagem abaixo - são necessários mais 70 votos positivos para serem listados primeiro.
Robert Guice
115

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

Dan Malcolm
fonte
Ótimo, agora funciona. Não entendo por que algo assim não é mencionado na documentação do editor.
JohnA10
1
tinemce.triggerSave()chama a save()função para TODOS os seus editores ativos. Se você tiver mais de um, é mais eficiente definir sua função onChange da seguinte forma:editor.on('change', editor.save);
DOOManiac
@DooManiac - Boa chamada, obrigado. Resposta e jsfiddle atualizados. Eu mantive a função anônima no retorno de chamada para garantir que save seja chamado como um método do objeto editor.
Dan Malcolm de
Há um bug com as versões do tinymce acima de 4.1.0 com os botões negrito e itálico para os quais a classe 'mce-active' não é adicionada diretamente (mas apenas após alguns caracteres digitados no campo textarea) - portanto, os botões não parece ativado ... com fio ... ( jsfiddle.net/9euk9/304 )
Ouatataz
Ótima solução!
Shakeel Ahmed
29

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();
});
Morgan
fonte
27

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

Guffa
fonte
1
Estou fazendo isso com o plugin jquery ajaxForm e o valor textarea não é passado até meu segundo envio, então estou pensando que você não pode alterar os dados enviados no manipulador onsubmit.
Brenden,
1
@Brenden: Se o plug-in também usa o evento onsubmit para interceptar o formulário, você deve ter certeza de que seu manipulador de eventos é executado primeiro, caso contrário, o plug-in coletará os dados do formulário antes que você tenha a chance de mover os dados do editor em um campo de formulário.
Guffa
Por que o downvote? Se você não explicar o que acha que está errado, isso não pode melhorar a resposta.
Guffa
20

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(); 
Kris Khairallah
fonte
8

Eu usei:

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

Isso é tudo que você precisa fazer.

Bob Roberts
fonte
7

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();
                });
CyberNinja
fonte
6
var text = tinyMCE.activeEditor.getContent();
$('#textareaid').remove();
$('<textarea id="textareaid" name="textareaid">'+text+'</textarea>').insertAfter($('[name=someinput]'));
Swyst
fonte
1
Usar tinyMCE.activeEditor.getContent () foi a única coisa que consegui fazer funcionar. Obrigado!
MadTurki de
1

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

Spocke
fonte
1

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().

James111
fonte
1

@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.

SupaMonkey
fonte
Achado interessante. Eu acredito que você quer dizer a versão 3.5.7? Acabei de fazer alguns testes com 3.5.7 e 3.5.8 e, tinyMCE.triggerSave()na verdade, funciona bem para mim no modo normal. Mas você está correto ao dizer que já existe algum tipo de salvamento automático no modo jquery, o que contradiz tinymce.com/wiki.php/Plugin:autosave : "Este plug-in provavelmente será estendido no futuro para fornecer suporte ao salvamento automático AJAX."
sayap
0

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.

Gzerone
fonte
0

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.

Andrew Tevington
fonte
0

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();
A.Neamati
fonte