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

106

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?

Agus Puryanto
źródło

Odpowiedzi:

180

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

eldar
źródło
15
Używanie TinyMCE 3.2+ z wtyczką jquery: $('#textarea_id').tinymce().save();w module obsługi onSubmit twojego formularza.
Brenden
@Brenden Używam wersji 3.5.8 programu tinymce iw konsoli pokazuje błąd tinymce () nie jest funkcją. Naprawiłem mój problem z eldar thing
Code Prank
1
Najlepsza odpowiedź, krótka, ale słodka, a także najczystsze rozwiązanie. Działa również z wieloma polami. Jedyną wadą jest to, że powoduje to zapisywanie dla wszystkich elementów.
Hugo Zink
tinymce.init ({selector: 'textarea'});
suraj
Dan Malcolm ma najlepszą odpowiedź na obecną wersję - zobacz post poniżej - aby znaleźć się na liście jako pierwszy, potrzeba jeszcze 70 głosów poparcia.
Robert Guice
116

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

Dan Malcolm
źródło
Świetnie, teraz działa. Nie rozumiem, dlaczego coś takiego nie jest wspomniane w dokumentacji redaktora.
John A10,
1
tinemce.triggerSave()wywołuje save()funkcję WSZYSTKICH aktywnych redaktorów. Jeśli masz więcej niż jeden, bardziej efektywne jest ustawienie funkcji editor.on('change', editor.save);
onChange w następujący
@DooManiac - Dobry telefon, dzięki. Zaktualizowano odpowiedź i jsfiddle. Zachowałem anonimową funkcję w wywołaniu zwrotnym, aby upewnić się, że save jest wywoływany jako metoda obiektu edytora.
Dan Malcolm
W wersjach Tinymce powyżej 4.1.0 występuje błąd z przyciskami pogrubionymi i kursywą, dla których klasa 'mce-active' nie jest dodawana bezpośrednio (ale tylko po wpisaniu kilku znaków w polu textarea) - dlatego przyciski nie wygląd aktywowany ... przewodowy ... ( jsfiddle.net/9euk9/304 )
Ouatataz
Świetne rozwiązanie!
Shakeel Ahmed
29

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();
});
morgan
źródło
27

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

Guffa
źródło
1
Robię to za pomocą wtyczki jquery ajaxForm, a wartość textarea nie jest przekazywana do mojego drugiego przesłania, więc myślę, że nie możesz zmienić przesłanych danych w module obsługi onsubmit.
Brenden
1
@Brenden: Jeśli wtyczka używa również zdarzenia onsubmit do przechwycenia formularza, musisz upewnić się, że program obsługi zdarzeń działa jako pierwszy, w przeciwnym razie wtyczka zbierze dane z formularza, zanim będziesz mieć możliwość przeniesienia danych z edytor do pola formularza.
Guffa
Dlaczego głos przeciw? Jeśli nie wyjaśnisz, co Twoim zdaniem jest niewłaściwe, nie poprawi to odpowiedzi.
Guffa,
20

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(); 
Kris Khairallah
źródło
8

Użyłem:

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

To wszystko, co musisz zrobić.

Bob Roberts
źródło
7

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

 setup: function (editor) {
                editor.on('change', function () {
                    tinymce.triggerSave();
                });
CyberNinja
źródło
6
var text = tinyMCE.activeEditor.getContent();
$('#textareaid').remove();
$('<textarea id="textareaid" name="textareaid">'+text+'</textarea>').insertAfter($('[name=someinput]'));
Swyst
źródło
1
Korzystanie z tinyMCE.activeEditor.getContent () było jedyną rzeczą, którą mogłem uruchomić. Dzięki!
MadTurki
1

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

Spocke
źródło
1

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

James111
źródło
1

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

SupaMonkey
źródło
Ciekawe znalezisko. Myślę, że masz na myśli wersję 3.5.7? Właśnie wykonałem kilka testów z 3.5.7 i 3.5.8 i tinyMCE.triggerSave()faktycznie działa dobrze dla mnie w trybie normalnym. Ale masz rację, że w trybie jquery istnieje już jakiś rodzaj automatycznego zapisywania, co jest sprzeczne z tinymce.com/wiki.php/Plugin:autosave : „Ta wtyczka najprawdopodobniej zostanie w przyszłości rozszerzona, aby zapewnić obsługę automatycznego zapisywania AJAX”.
powiedz
0

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.

gzerone
źródło
0

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.

Andrew Tevington
źródło
0

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();
A.Neamati
źródło