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 следующим образом, чтобы значения скрытых текстовых полей синхронизировались по мере внесения изменений с помощью редакторов 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).

• Однако при отправке формы отправляется именно содержимое этого текстового поля. Следовательно, его содержимое необходимо обновить перед отправкой формы.

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

  tinyMCE.triggerSave();

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

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

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

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

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

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

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

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

// 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, работающим в «нормальном режиме»; и ни триггерSave, ни save () не работали.

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

Я просто скрываю () форму tinymce и отправляю, измененное значение 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 с вашим текстовым полем.

Чтобы добавить к другим ответам - зачем вам это нужно? Некоторое время я использовал 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);
    };
}

Итак, если что-то еще в вашем коде (или другой сторонней библиотеке) submitне сработает, их «автоматическое исправление» не сработает, и возникнет необходимость позвонить triggerSave.

РЕДАКТИРОВАТЬ: И на самом деле в случае OP submitвообще не вызывается. Поскольку это ajax'd, это позволяет обходить "автоматическое исправление", описанное выше.

Прежде всего:

1. Вы должны включить плагин tinymce jquery на свою страницу (jquery.tinymce.min.js)

2. Один из самых простых и безопасных способов - использовать getContentи setContentс помощью triggerSave. Пример:

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