jQuery и TinyMCE: значение textarea не отправляется

Question

Я использую 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]",
});

Можете ли вы объяснить мне, что я должен изменить и почему, чтобы получить значение в текстовой области?

Answer 1

Перед отправкой формы позвоните tinyMCE.triggerSave();

Answer 2

Вы можете настроить TinyMCE следующим образом, чтобы синхронизировать значения скрытых текстовых полей при внесении изменений через редакторы TinyMCE:

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

Элементы textarea будут обновляться автоматически, и вам не понадобятся дополнительные шаги перед сериализацией форм и т. Д.

Это было проверено на TinyMCE 4.0

Демонстрация работает на: http://jsfiddle.net/9euk9/49/

Обновление: приведенный выше код был обновлен на основе комментария DOOManiac

Answer 3

С Формы TinyMCE, jQuery и Ajax :

Отправка формы TinyMCE

• Когда текстовая область заменяется на TinyMCE, она фактически скрыта, и вместо нее отображается редактор TinyMCE (iframe).
• Однако именно содержимое этой текстовой области отправляется при отправке формы. Следовательно, его содержание должно быть обновлено перед отправкой формы.

• Для отправки стандартной формы она обрабатывается TinyMCE. Для отправки формы Ajax вы должны сделать это вручную, позвонив (до отправки формы):

  tinyMCE.triggerSave();

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

Answer 4

Это потому, что это больше не текстовая область. Он заменяется на iframe (и еще много чего), а функция сериализации получает данные только из полей формы.

Добавить скрытое поле в форму:

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

Перед публикацией формы получите данные из редактора и вставьте в скрытое поле:

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

(Конечно, редактор сам позаботится об этом, если вы отправите форму в обычном режиме, но, поскольку вы очищаете форму и отправляете данные самостоятельно, не используя форму, событие onsubmit в форме никогда не вызывается.) 1009 *

Answer 5

Когда вы запускаете ajax в своей форме, вы должны указать TinyMCE сначала обновить текстовую область:

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

Answer 6

Я использовал:

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

Это все, что вам нужно сделать.

Answer 7

var text = tinyMCE.activeEditor.getContent();
$('#textareaid').remove();
$('<textarea id="textareaid" name="textareaid">'+text+'</textarea>').insertAfter($('[name=someinput]'));

Answer 8

Это обеспечит сохранение содержимого при потере фокуса текстовой области

 setup: function (editor) {
                editor.on('change', function () {
                    tinymce.triggerSave();
                });

Answer 9

У меня была эта проблема некоторое время, и 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().

Answer 10

@ eldar: у меня была та же проблема с 3.6.7, работающим в «нормальном режиме»; и ни triggerSave, ни save () не работали.

Я перешел на плагин jQuery TinyMCE, и теперь мне больше ничего не нужно, он работает. Я предполагаю, что где-то вдоль линии они реализовали своего рода автоматический triggerSave для jQuery-версии TinyMCE.