jQuery và TinyMCE: giá trị textarea không gửi

Tôi đang sử dụng jQuery và TinyMCE để gửi biểu mẫu, nhưng có một vấn đề trong quá trình tuần tự hóa ở đó giá trị Textarea không đăng.

Đây là mã:

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

ngôn ngữ: 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]",
});

Bạn có thể giải thích cho tôi những gì tôi nên thay đổi và tại sao, để có được giá trị trong vùng văn bản được đăng không?

Trước khi gửi biểu mẫu, hãy gọi tinyMCE.triggerSave();

Bạn có thể định cấu hình TinyMCE như sau để giữ đồng bộ giá trị của các vùng văn bản ẩn khi các thay đổi được thực hiện thông qua trình chỉnh sửa TinyMCE:

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

Các phần tử của vùng văn bản sẽ được cập nhật tự động và bạn sẽ không cần thêm bất kỳ bước nào trước khi tuần tự hóa biểu mẫu, v.v.

Điều này đã được thử nghiệm trên TinyMCE 4.0

Demo đang chạy tại: http://jsfiddle.net/9euk9/49/

Cập nhật: Đoạn mã trên đã được cập nhật dựa trên nhận xét của DOOManiac

Từ các dạng TinyMCE, jQuery và Ajax :

Gửi biểu mẫu TinyMCE

• Khi một vùng văn bản được thay thế bằng TinyMCE, nó thực sự bị ẩn và trình soạn thảo TinyMCE (một iframe) được hiển thị thay thế.

• Tuy nhiên, đó là nội dung của textarea này được gửi khi biểu mẫu được gửi. Do đó, nội dung của nó phải được cập nhật trước khi gửi biểu mẫu.

• Đối với việc gửi biểu mẫu chuẩn, TinyMCE sẽ xử lý. Để gửi biểu mẫu Ajax, bạn phải thực hiện thủ công, bằng cách gọi (trước khi biểu mẫu được gửi):

  tinyMCE.triggerSave();

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

Đó là bởi vì nó không còn là một textarea nữa. Nó được thay thế bằng iframe (và không) và hàm tuần tự hóa chỉ lấy dữ liệu từ các trường biểu mẫu.

Thêm trường ẩn vào biểu mẫu:

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

Trước khi đăng biểu mẫu, hãy lấy dữ liệu từ trình chỉnh sửa và đưa vào trường ẩn:

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

(Tất nhiên, người chỉnh sửa sẽ tự lo việc này nếu bạn đăng biểu mẫu bình thường, nhưng khi bạn đang cạo biểu mẫu và tự gửi dữ liệu mà không sử dụng biểu mẫu, sự kiện gửi trực tiếp trên biểu mẫu sẽ không bao giờ được kích hoạt.)

Khi bạn chạy ajax trên biểu mẫu của mình, bạn cần yêu cầu TinyMCE cập nhật văn bản của bạn trước:

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

Tôi đã sử dụng:

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

Đây là tất cả những gì bạn cần làm.

Điều này sẽ đảm bảo rằng nội dung được lưu khi bạn mất tiêu điểm của vùng văn bản

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

Bạn cũng có thể chỉ cần sử dụng plugin và gói jQuery cho TinyMCE, nó sẽ giải quyết các loại vấn đề này.

Tôi đã gặp vấn đề này trong một thời gian và triggerSave()không hoạt động, cũng như bất kỳ phương pháp nào khác.

Vì vậy, tôi đã tìm thấy một cách phù hợp với mình (Tôi đang thêm điều này ở đây vì những người khác có thể đã thử triggerSave và v.v.):

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

Khi bạn gửi biểu mẫu của mình hoặc bất cứ điều gì bạn phải làm là lấy dữ liệu từ bộ chọn của bạn (Trong trường hợp của tôi .tinymce:) bằng cách sử dụng $('.tinymce').text().

@eldar: Tôi gặp vấn đề tương tự với 3.6.7 chạy ở 'chế độ bình thường'; và cả triggerSave hay save () đều không hoạt động.

Tôi đã đổi sang plugin jQuery TinyMCE và không cần phải làm gì khác, nó đang hoạt động ngay. Tôi giả sử ở đâu đó dọc theo dòng họ đã triển khai một số loại tự động triggerSave cho phiên bản jQuery của TinyMCE.

Tôi chỉ ẩn () tinymce và biểu mẫu gửi, giá trị đã thay đổi của textarea bị thiếu. Vì vậy, tôi đã thêm điều này:

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

Nó làm việc cho tôi.

tinyMCE.triggerSave(); có vẻ là câu trả lời chính xác, vì nó sẽ đồng bộ hóa các thay đổi từ iFrame sang vùng văn bản của bạn.

Tuy nhiên, để thêm vào các câu trả lời khác - tại sao bạn cần điều này? Tôi đã sử dụng tinyMCE được một thời gian và không gặp sự cố nào với các trường biểu mẫu không đi qua. Sau một số nghiên cứu, nó hóa ra là "tự động vá" các lần gửi phần tử biểu mẫu, được bật theo mặc định - http://www.tinymce.com/wiki.php/Configuration3x:submit_patch

Về cơ bản, họ xác định lại submitđể gọi triggerSavetrước, nhưng chỉ khi submit chưa được xác định lại bởi một thứ khác:

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

Vì vậy, nếu một cái gì đó khác trong mã của bạn (hoặc một thư viện bên thứ 3 khác) đang gây rối submit, "tự động vá" của chúng sẽ không hoạt động và bạn cần phải gọi triggerSave.

CHỈNH SỬA: Và thực sự trong trường hợp của OP, submitkhông hề được gọi. Vì nó không hoạt động, điều này đang bỏ qua "tự động vá" được mô tả ở trên.

Đầu tiên:

1. Bạn phải bao gồm plugin jquery tinymce trong trang của mình (jquery.tinymce.min.js)

2. Một trong những cách đơn giản nhất và an toàn nhất là sử dụng getContentvà setContentvới triggerSave. Thí dụ:

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