jQuery i TinyMCE: wartość textarea nie jest przesyłana

Używam jQuery i TinyMCE do przesyłania formularza, ale występuje problem z serializacją polegający na tym, że wartość Textarea nie jest wysyłana.

Oto kod:

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

język: 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]",
});

Czy możesz mi wyjaśnić, co powinienem zmienić i dlaczego, aby uzyskać wartość w opublikowanym obszarze tekstowym?

Przed wysłaniem formularza zadzwoń tinyMCE.triggerSave();

Możesz skonfigurować TinyMCE w następujący sposób, aby zachować synchronizację wartości ukrytych obszarów tekstu, gdy zmiany są wprowadzane za pośrednictwem edytorów TinyMCE:

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

Elementy textarea będą aktualizowane automatycznie i nie będziesz potrzebować żadnych dodatkowych kroków przed serializacją formularzy itp.

Zostało to przetestowane na TinyMCE 4.0

Demo działa pod adresem: http://jsfiddle.net/9euk9/49/

Aktualizacja: Powyższy kod został zaktualizowany na podstawie komentarza DOOManiaca

Z formularzy TinyMCE, jQuery i Ajax :

Przesyłanie formularza TinyMCE

• Kiedy obszar tekstowy jest zastępowany przez TinyMCE, jest on faktycznie ukryty i zamiast tego wyświetlany jest edytor TinyMCE (ramka iframe).

• Jednak to zawartość tego obszaru tekstowego jest wysyłana po przesłaniu formularza. W związku z tym jego zawartość musi zostać zaktualizowana przed wysłaniem formularza.

• W przypadku przesłania standardowego formularza jest to obsługiwane przez TinyMCE. Aby przesłać formularz Ajax, musisz to zrobić ręcznie, dzwoniąc (przed przesłaniem formularza):

  tinyMCE.triggerSave();

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

To dlatego, że to już nie jest textarea. Jest zastępowany ramką iframe (i tak dalej), a funkcja serializacji pobiera dane tylko z pól formularza.

Dodaj ukryte pole do formularza:

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

Przed wysłaniem formularza pobierz dane z edytora i umieść w ukrytym polu:

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

(Redaktor oczywiście sam by się tym zajął, gdybyś opublikował formularz normalnie, ale ponieważ sam zeskrobujesz formularz i wysyłasz dane bez korzystania z formularza, zdarzenie onsubmit w formularzu nigdy nie jest wyzwalane).

Kiedy uruchamiasz Ajax w swoim formularzu, musisz powiedzieć TinyMCE, aby najpierw zaktualizował twój textarea:

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

Użyłem:

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

To wszystko, co musisz zrobić.

Zapewni to zapisanie zawartości, gdy stracisz koncentrację na obszarze tekstu

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

Możesz także po prostu użyć wtyczki jQuery i pakietu dla TinyMCE, który rozwiązuje tego rodzaju problemy.

Miałem ten problem przez jakiś czas i triggerSave()nie działał, podobnie jak żadna inna metoda.

Więc znalazłem sposób, który zadziałał dla mnie (dodaję to tutaj, ponieważ inni ludzie mogli już próbować triggerSave itp.):

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

Kiedy przesyłasz swój formularz lub cokolwiek innego, co musisz zrobić, to pobrać dane z selektora (w moim przypadku .tinymce:) za pomocą $('.tinymce').text().

@eldar: Miałem ten sam problem z 3.6.7 działającym w „trybie normalnym”; i ani triggerSave, ani save () nie działały.

Zmieniłem na wtyczkę jQuery TinyMCE i bez konieczności robienia czegokolwiek innego działa teraz. Zakładam, że gdzieś po drodze zaimplementowali jakiś rodzaj automatycznego wyzwalaczaSave dla wersji jQuery TinyMCE.

Po prostu ukrywam () tinymce i przesyłam formularz, brakuje zmienionej wartości textarea. Więc dodałem to:

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

Mi to pasuje.

tinyMCE.triggerSave(); wydaje się być poprawną odpowiedzią, ponieważ zsynchronizuje zmiany między ramką iFrame a obszarem tekstowym.

Aby jednak dodać do innych odpowiedzi - dlaczego tego potrzebujesz? Używałem tinyMCE od jakiegoś czasu i nie napotkałem problemów z nieprzekazywaniem się pól formularza. Po kilku badaniach okazało się, że jest to ich „automatyczne łatanie” przesyłanych elementów formularza, które jest domyślnie włączone - http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

Zasadniczo zmieniają definicję wcześniejszego submitpołączenia triggerSave, ale tylko wtedy, gdy submit nie zostały jeszcze zdefiniowane przez coś innego:

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

Tak więc, jeśli coś innego w Twoim kodzie (lub innej bibliotece innej firmy) ma problemy submit, ich „automatyczne łatanie” nie zadziała i konieczne będzie połączenie triggerSave.

EDYCJA: I właściwie w przypadku OP, submitnie jest w ogóle wywoływany. Ponieważ jest to ajax'd, jest to pomijanie "automatycznego łatania" opisanego powyżej.

Po pierwsze:

1. Musisz dołączyć wtyczkę tinymce jquery do swojej strony (jquery.tinymce.min.js)

2. Jednym z najprostszych i najbezpieczniejszych sposobów jest użycie getContenti za setContentpomocą triggerSave. Przykład:

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