jQuery dan TinyMCE: nilai textarea tidak terkirim

106

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?

Agus Puryanto
sumber

Jawaban:

180

Sebelum mengirimkan formulir, hubungi tinyMCE.triggerSave();

eldar
sumber
15
Menggunakan TinyMCE 3.2+ dengan plugin jquery: $('#textarea_id').tinymce().save();di handler onSubmit formulir Anda.
Brenden
@ Brenden Saya menggunakan versi 3.5.8 dari tinymce dan di konsol itu menunjukkan kesalahan tinymce () bukan fungsi. Saya telah memperbaiki masalah saya dengan eldar thing
Code Prank
1
Jawaban terbaik, singkat tapi manis dan juga merupakan solusi terbersih. Bekerja dengan banyak bidang juga. Satu-satunya kelemahan adalah ini memicu penyimpanan untuk semua elemen.
Hugo Zink
tinymce.init ({selector: 'textarea'});
Suraj
Dan Malcolm memiliki jawaban terbaik untuk versi saat ini - silakan lihat posting di bawah ini - perlu 70 suara positif lagi untuk didaftarkan terlebih dahulu.
Robert Guice
116

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

Dan Malcolm
sumber
Bagus, ini berfungsi sekarang. Saya tidak mengerti mengapa hal seperti ini tidak disebutkan di dokumentasi editor.
JohnA10
1
tinemce.triggerSave()memanggil save()fungsi untuk SEMUA editor aktif Anda. Jika Anda memiliki lebih dari satu, akan lebih efisien untuk menyetel fungsi onChange Anda seperti ini:editor.on('change', editor.save);
DOOManiac
@DooManiac - Panggilan bagus, terima kasih. Jawaban dan jsfiddle diperbarui. Saya mempertahankan fungsi anonim di callback untuk memastikan bahwa simpan disebut sebagai metode objek editor.
Dan Malcolm
Ada bug dengan versi tinymce di atas 4.1.0 dengan tombol tebal dan miring di mana kelas 'mce-active' tidak ditambahkan secara langsung (tetapi hanya setelah beberapa karakter diketik di bidang textarea) - sehingga tombol tidak ditambahkan terlihat diaktifkan ... kabel ... ( jsfiddle.net/9euk9/304 )
Ouatataz
Solusi bagus!
Shakeel Ahmed
29

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();
});
morgan
sumber
27

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

Guffa
sumber
1
Saya melakukan ini dengan plugin jquery ajaxForm dan nilai textarea tidak lolos sampai pengiriman kedua saya, jadi saya pikir Anda tidak dapat mengubah data yang dikirimkan di penangan onsubmit.
Brenden
1
@Brenden: Jika plugin juga menggunakan acara onsubmit untuk mencegat formulir, maka Anda harus memastikan bahwa pengendali acara Anda berjalan terlebih dahulu, jika tidak plugin akan mengumpulkan data dari formulir sebelum Anda memiliki kesempatan untuk memindahkan data dari editor ke dalam bidang formulir.
Guffa
Mengapa suara negatifnya? Jika Anda tidak menjelaskan apa yang menurut Anda salah, itu tidak dapat memperbaiki jawabannya.
Guffa
20

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

Saya menggunakan:

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

Hanya ini yang perlu Anda lakukan.

Bob Roberts
sumber
7

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

 setup: function (editor) {
                editor.on('change', function () {
                    tinymce.triggerSave();
                });
CyberNinja
sumber
6
var text = tinyMCE.activeEditor.getContent();
$('#textareaid').remove();
$('<textarea id="textareaid" name="textareaid">'+text+'</textarea>').insertAfter($('[name=someinput]'));
Swyst
sumber
1
Menggunakan tinyMCE.activeEditor.getContent () adalah satu-satunya hal yang dapat saya kerjakan. Terima kasih!
MadTurki
1

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

Spocke
sumber
1

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

Yakobus111
sumber
1

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

SupaMonkey
sumber
Temuan menarik. Saya yakin maksud Anda versi 3.5.7? Saya baru saja melakukan beberapa pengujian dengan 3.5.7 dan 3.5.8, dan tinyMCE.triggerSave()sebenarnya berfungsi dengan baik untuk saya dalam mode normal. Tetapi Anda benar bahwa sudah ada semacam penyimpanan otomatis dalam mode jquery, yang bertentangan dengan tinymce.com/wiki.php/Plugin:autosave : "Plugin ini kemungkinan besar akan diperpanjang di masa mendatang untuk menyediakan dukungan penyimpanan otomatis AJAX."
sayap
0

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.

gzerone
sumber
0

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.

Andrew Tevington
sumber
0

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