jQuery ve TinyMCE: textarea değeri gönderilmiyor

Form göndermek için jQuery ve TinyMCE kullanıyorum , ancak Textarea değerinin gönderilmemesi nedeniyle serileştirmede bir sorun var.

İşte kod:

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

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

Gönderilen metin alanındaki değeri almak için neyi ve neden değiştirmem gerektiğini bana açıklayabilir misiniz?

Formu göndermeden önce arayın tinyMCE.triggerSave();

TinyMCE editörleri aracılığıyla değişiklikler yapılırken gizli metin alanlarının değerlerini senkronize tutmak için TinyMCE'yi aşağıdaki gibi yapılandırabilirsiniz:

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

Metin alanı öğeleri otomatik olarak güncellenecek ve formları serileştirmeden önce herhangi bir ek adıma ihtiyacınız olmayacak.

Bu, TinyMCE 4.0 üzerinde test edilmiştir

Demo şu adreste çalışıyor: http://jsfiddle.net/9euk9/49/

Güncelleme: Yukarıdaki kod, DOOManiac'ın yorumuna göre güncellendi

Gönderen TinyMCE, jQuery ve Ajax formları :

TinyMCE Form Gönderimi

• Bir metin alanı TinyMCE ile değiştirildiğinde, gerçekte gizlidir ve bunun yerine TinyMCE editörü (bir iframe) görüntülenir.

• Ancak, form gönderildiğinde gönderilen bu metin alanının içeriğidir. Sonuç olarak, form gönderilmeden önce içeriği güncellenmelidir.

• Standart bir form gönderimi için TinyMCE tarafından yönetilir. Bir Ajax form gönderimi için, bunu arayarak (form gönderilmeden önce) manuel olarak yapmanız gerekir:

  tinyMCE.triggerSave();

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

Çünkü artık bir metin alanı değil. Bir iframe (ve ne değil) ile değiştirilir ve serileştirme işlevi yalnızca form alanlarından veri alır.

Forma gizli bir alan ekleyin:

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

Formu göndermeden önce, verileri düzenleyiciden alın ve gizli alana koyun:

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

(Formu normal olarak gönderdiyseniz, editör elbette bununla ilgilenecektir, ancak formu kazıdığınızda ve formu kullanmadan verileri kendiniz gönderirken, formdaki onsubmit olayı asla tetiklenmez.)

Formunuzda ajax çalıştırdığınızda, TinyMCE'ye önce metin alanınızı güncellemesini söylemeniz gerekir:

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

Kullandım:

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

Tek yapmanız gereken bu.

Bu, metin alanının odağını kaybettiğinizde içeriğin kaydedilmesini sağlayacaktır.

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

Ayrıca, TinyMCE için jQuery eklentisini ve paketini de kullanabilirsiniz, bu tür sorunları sıralar.

Bir süredir bu problemi yaşadım ve triggerSave()işe yaramadı, diğer yöntemlerin hiçbiri de olmadı.

Bu yüzden benim için işe yarayan bir yol buldum (bunu buraya ekliyorum çünkü diğer insanlar tetikleyici kaydetmeyi vb. Denemiş olabilir ...):

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

Formunuzu göndererek ya da her türlü olduğunuzda yapmanız gereken tüm kapmak için seçiciden verilerdir (Benim durumumda: .tinymce) kullanılarak $('.tinymce').text().

@eldar: 3.6.7 'normal modda' çalışırken aynı sorunu yaşadım; ne triggerSave ne de save () çalışmıyordu.

JQuery TinyMCE eklentisine geçtim ve başka bir şey yapmadan şimdi çalışıyor. Çizgi boyunca bir yerde TinyMCE'nin jQuery sürümü için bir tür otomatik triggerSave uyguladıklarını varsayıyorum.

Ben sadece tinymce'yi () gizleyip formu gönderiyorum, metin alanının değişen değeri eksik. Ben de şunu ekledim:

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

Benim için çalışıyor.

tinyMCE.triggerSave(); iFrame'deki değişiklikleri metin alanınıza senkronize edeceği için doğru cevap gibi görünüyor.

Yine de diğer cevaplara eklemek için - buna neden ihtiyacınız var? Bir süredir tinyMCE kullanıyordum ve form alanlarının gelmemesiyle ilgili sorunlarla karşılaşmamıştım. Bazı araştırmalardan sonra, varsayılan olarak açık olan form öğesi gönderimlerine "otomatik yama" uyguladığı ortaya çıktı - http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

Temel olarak, önceden submitaramayı yeniden tanımlarlar triggerSave, ancak yalnızca submit başka bir şey tarafından yeniden tanımlanmadıysa:

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

Bu nedenle, kodunuzdaki (veya başka bir üçüncü taraf kitaplığındaki) başka bir şeyle uğraşıyorsa submit, "otomatik yama" çalışmaz ve aramak gerekli hale gelir triggerSave.

DÜZENLEME: Ve aslında OP'nin durumunda, submithiç çağrılmıyor. Ajax'lı olduğu için, bu yukarıda açıklanan "otomatik yama" yı atlamaktır.

Her şeyden önce:

1. Sayfanıza tinymce jquery eklentisi eklemelisiniz (jquery.tinymce.min.js)

2. En basit ve en güvenli yollarından biri kullanımına olduğunu getContentve setContenttriggerSave ile. Misal:

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