jQuery และ TinyMCE: ค่า textarea ไม่ส่ง

ฉันใช้jQueryและTinyMCEเพื่อส่งแบบฟอร์ม แต่มีปัญหาในการทำให้เป็นอนุกรมเนื่องจากค่า Textarea ไม่ได้โพสต์

นี่คือรหัส:

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

ภาษา: 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]",
});

คุณช่วยอธิบายให้ฉันทราบได้ไหมว่าฉันควรเปลี่ยนอะไรและทำไมเพื่อให้ได้ค่าในพื้นที่ข้อความที่โพสต์

ก่อนส่งแบบฟอร์มโทร tinyMCE.triggerSave();

คุณสามารถกำหนดค่า TinyMCE ได้ดังต่อไปนี้เพื่อให้ค่าของ textareas ที่ซ่อนอยู่ในการซิงค์เมื่อทำการเปลี่ยนแปลงผ่านตัวแก้ไข TinyMCE:

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

องค์ประกอบ textarea จะได้รับการอัปเดตโดยอัตโนมัติและคุณไม่จำเป็นต้องมีขั้นตอนเพิ่มเติมใด ๆ ก่อนที่จะจัดรูปแบบต่างๆ

สิ่งนี้ได้รับการทดสอบบน TinyMCE 4.0

การสาธิตทำงานที่: http://jsfiddle.net/9euk9/49/

อัปเดต: โค้ดด้านบนได้รับการอัปเดตตามความคิดเห็นของ DOOManiac

จาก รูปแบบ TinyMCE, jQuery และ Ajax :

การส่งแบบฟอร์ม TinyMCE

• เมื่อพื้นที่ข้อความถูกแทนที่ด้วย TinyMCE จริงจะถูกซ่อนไว้และตัวแก้ไข TinyMCE (iframe) จะปรากฏขึ้นแทน

• อย่างไรก็ตามเนื้อหาของ textarea นี้จะถูกส่งเมื่อส่งแบบฟอร์ม ดังนั้นจึงต้องอัปเดตเนื้อหาก่อนที่จะส่งแบบฟอร์ม

• สำหรับการส่งแบบฟอร์มมาตรฐานจะจัดการโดย TinyMCE สำหรับการส่งแบบฟอร์ม Ajax คุณต้องดำเนินการด้วยตนเองโดยโทร (ก่อนส่งแบบฟอร์ม):

  tinyMCE.triggerSave();

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

นั่นเป็นเพราะมันไม่ใช่พื้นที่ว่างอีกต่อไป มันถูกแทนที่ด้วย iframe (และ whatnot) และฟังก์ชัน serialize จะรับข้อมูลจากช่องฟอร์มเท่านั้น

เพิ่มฟิลด์ที่ซ่อนอยู่ในแบบฟอร์ม:

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

ก่อนโพสต์แบบฟอร์มรับข้อมูลจากตัวแก้ไขและใส่ในฟิลด์ที่ซ่อนไว้:

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

(แน่นอนว่าบรรณาธิการจะดูแลเรื่องนี้เองหากคุณโพสต์แบบฟอร์มตามปกติ แต่ในขณะที่คุณขูดแบบฟอร์มและส่งข้อมูลด้วยตัวเองโดยไม่ใช้แบบฟอร์มเหตุการณ์ onsubmit ในแบบฟอร์มจะไม่ถูกทริกเกอร์)

เมื่อคุณเรียกใช้ ajax ในแบบฟอร์มของคุณคุณต้องบอกให้ TinyMCE อัปเดต textarea ของคุณก่อน:

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

ฉันใช้:

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

นี่คือทั้งหมดที่คุณต้องทำ

เพื่อให้แน่ใจว่าเนื้อหาจะได้รับการบันทึกเมื่อคุณสูญเสียโฟกัสของพื้นที่ข้อความ

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

คุณยังสามารถใช้ปลั๊กอิน jQuery และแพ็คเกจสำหรับ TinyMCE ได้อีกด้วยซึ่งจะแยกประเภทของปัญหาเหล่านี้

ฉันมีปัญหานี้มาระยะหนึ่งแล้วและใช้งานtriggerSave()ไม่ได้และไม่ได้ใช้วิธีอื่นใด

ดังนั้นฉันจึงพบวิธีที่เหมาะกับฉัน (ฉันเพิ่มที่นี่เพราะคนอื่นอาจลอง triggerSave แล้วและอื่น ๆ ... ):

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

เมื่อคุณส่งแบบฟอร์มหรือสิ่งที่คุณต้องทำคือดึงข้อมูลจากตัวเลือกของคุณ (ในกรณีของฉัน :) .tinymceโดยใช้$('.tinymce').text().

@eldar: ฉันมีปัญหาเดียวกันกับ 3.6.7 ที่ทำงานใน 'โหมดปกติ'; และ triggerSave หรือ save () ไม่ทำงาน

ฉันเปลี่ยนเป็นปลั๊กอิน jQuery TinyMCE และไม่ต้องทำอะไรอีกเลยตอนนี้ ฉันสมมติว่ามีบางแห่งตามแนวที่พวกเขาใช้ auto triggerSave สำหรับ TinyMCE เวอร์ชัน jQuery

ฉันแค่ซ่อน () ขนาดเล็กและส่งแบบฟอร์มค่าที่เปลี่ยนแปลงของ textarea หายไป ฉันจึงเพิ่มสิ่งนี้:

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

มันใช้ได้กับฉัน

tinyMCE.triggerSave(); ดูเหมือนจะเป็นคำตอบที่ถูกต้องเนื่องจากจะซิงค์การเปลี่ยนแปลงจาก iFrame ไปยัง textarea ของคุณ

หากต้องการเพิ่มคำตอบอื่น ๆ - ทำไมคุณถึงต้องการสิ่งนี้? ฉันใช้ tinyMCE มาระยะหนึ่งแล้วและไม่พบปัญหาเกี่ยวกับช่องแบบฟอร์มที่ไม่ผ่าน หลังจากการวิจัยบางส่วนพบว่าเป็นการ "แก้ไขอัตโนมัติ" ของการส่งองค์ประกอบแบบฟอร์มซึ่งเป็นค่าเริ่มต้น - http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

โดยพื้นฐานแล้วพวกเขากำหนดนิยามใหม่submitให้โทรtriggerSaveล่วงหน้า แต่ถ้า submitยังไม่ได้รับการนิยามใหม่โดยสิ่งอื่น:

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

ดังนั้นถ้าอย่างอื่นในรหัสของคุณ (หรือห้องสมุดบุคคลอื่นที่ 3) จะล้อเล่นกับsubmit"รถยนต์ปะ" triggerSaveของพวกเขาจะไม่ทำงานและมันจะกลายเป็นสิ่งที่จำเป็นต่อการเรียกร้อง

แก้ไข: จริงๆแล้วในกรณีของ OP submitไม่ได้ถูกเรียกเลย เนื่องจากเป็น ajax จึงเป็นการข้าม "การแก้ไขอัตโนมัติ" ที่อธิบายไว้ข้างต้น

ก่อนอื่น:

1. คุณต้องรวมปลั๊กอิน tinymce jquery ในเพจของคุณ (jquery.tinymce.min.js)

2. หนึ่งในวิธีที่ง่ายที่สุดและปลอดภัยที่สุดคือการใช้งานgetContentและsetContentมี triggerSave ตัวอย่าง:

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