jQuery dan TinyMCE: nilai textarea tidak terkirim

Saya menggunakan jQuery dan TinyMCE untuk mengirimkan formulir, tetapi ada masalah dalam serialisasi karena nilai Textarea tidak diposting.

Ini kodenya:

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

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

Dapatkah Anda menjelaskan kepada saya apa yang harus saya ubah, dan mengapa, untuk mendapatkan nilai di area teks yang diposting?

Sebelum mengirimkan formulir, hubungi tinyMCE.triggerSave();

Anda dapat mengkonfigurasi TinyMCE sebagai berikut untuk menjaga nilai textarea tersembunyi tetap sinkron saat perubahan dilakukan melalui editor TinyMCE:

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

Elemen textarea akan selalu diperbarui secara otomatis dan Anda tidak memerlukan langkah tambahan sebelum membuat serialisasi formulir, dll.

Ini telah diuji pada TinyMCE 4.0

Demo berjalan di: http://jsfiddle.net/9euk9/49/

Pembaruan: Kode di atas telah diperbarui berdasarkan komentar DOOManiac

Dari TinyMCE, jQuery dan formulir Ajax :

Pengiriman Formulir TinyMCE

• Ketika sebuah textarea digantikan oleh TinyMCE, itu sebenarnya tersembunyi dan editor TinyMCE (sebuah iframe) yang ditampilkan.

• Namun, konten textarea inilah yang dikirim saat formulir dikirimkan. Akibatnya isinya harus diperbarui sebelum pengiriman formulir.

• Untuk pengiriman formulir standar, itu ditangani oleh TinyMCE. Untuk pengiriman formulir Ajax, Anda harus melakukannya secara manual, dengan menelepon (sebelum formulir dikirimkan):

  tinyMCE.triggerSave();

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

Itu karena ini bukan lagi textarea. Ini diganti dengan iframe (dan yang lainnya), dan fungsi serialize hanya mendapatkan data dari kolom formulir.

Tambahkan bidang tersembunyi ke formulir:

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

Sebelum memposting formulir, dapatkan data dari editor dan letakkan di bidang tersembunyi:

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

(Editor tentu saja akan mengurus ini sendiri jika Anda memposting formulir secara normal, tetapi saat Anda menyalin formulir dan mengirim data sendiri tanpa menggunakan formulir, acara onsubmit pada formulir tidak pernah dipicu.)

Saat Anda menjalankan ajax pada formulir Anda, Anda perlu memberi tahu TinyMCE untuk memperbarui textarea Anda terlebih dahulu:

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

Saya menggunakan:

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

Hanya ini yang perlu Anda lakukan.

Ini akan memastikan bahwa konten disimpan saat Anda kehilangan fokus pada area teks

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

Anda juga dapat menggunakan plugin jQuery dan paket untuk TinyMCE yang menyelesaikan masalah semacam ini.

Saya mengalami masalah ini untuk sementara waktu dan triggerSave()tidak berhasil, begitu pula metode lainnya.

Jadi saya menemukan cara yang berhasil untuk saya (Saya menambahkan ini di sini karena orang lain mungkin sudah mencoba triggerSave dan lain-lain ...):

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

Saat Anda mengirimkan formulir Anda atau apa pun yang harus Anda lakukan adalah mengambil data dari pemilih Anda (Dalam kasus saya :) .tinymcemenggunakan $('.tinymce').text().

@eldar: Saya mengalami masalah yang sama dengan 3.6.7 yang berjalan dalam 'mode normal'; dan triggerSave atau save () tidak bekerja.

Saya berubah ke plugin jQuery TinyMCE dan tanpa harus melakukan apa pun itu berfungsi sekarang. Saya berasumsi di suatu tempat di sepanjang garis mereka menerapkan semacam triggerSave otomatis untuk versi jQuery dari TinyMCE.

Saya hanya menyembunyikan () tinymce dan mengirimkan formulir, nilai textarea yang diubah hilang. Jadi saya menambahkan ini:

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

Ini bekerja untuk saya.

tinyMCE.triggerSave(); tampaknya jawaban yang benar, karena ini akan menyinkronkan perubahan dari iFrame ke textarea Anda.

Untuk menambah jawaban lain - mengapa Anda membutuhkan ini? Saya telah menggunakan tinyMCE untuk sementara waktu dan tidak mengalami masalah dengan bidang formulir yang tidak berhasil. Setelah beberapa penelitian, ternyata itu adalah "penambalan otomatis" pengiriman elemen formulir, yang diaktifkan secara default - http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

Pada dasarnya, mereka mendefinisikan ulang submituntuk memanggil triggerSavesebelumnya, tetapi hanya jika submit belum didefinisikan ulang oleh yang lain:

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

Jadi, jika ada hal lain dalam kode Anda (atau pustaka pihak ketiga lainnya) yang bermasalah submit, "penambalan otomatis" mereka tidak akan berfungsi dan Anda perlu memanggiltriggerSave .

EDIT: Dan sebenarnya dalam kasus OP, submittidak dipanggil sama sekali. Karena itu ajax, ini melewati "tambalan otomatis" yang dijelaskan di atas.

Pertama-tama:

1. Anda harus menyertakan plugin tinymce jquery di halaman Anda (jquery.tinymce.min.js)

2. Salah satu cara termudah dan teraman adalah menggunakan getContentdan setContentdengan triggerSave. Contoh:

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