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

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

Ответ 1

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

Ответ 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

Ответ 3

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

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

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

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

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

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

Ответ 4

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

Подача формы TinyMCE

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

    tinyMCE.triggerSave();

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

Ответ 5

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

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

Ответ 6

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

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

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

Ответ 7

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

Ответ 8

Вы также можете просто использовать плагин jQuery и пакет для TinyMCE, который сортирует эти проблемы.

Ответ 9

@eldar: У меня была та же проблема, что и 3.6.7, работающая в "нормальном режиме"; и ни триггерSave, ни save() не работают.

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

Ответ 10

Я просто скрываю() форму timymce и submit, измененное значение textarea отсутствует. Поэтому я добавил следующее:

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

Это работает для меня.

Ответ 11

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.

EDIT: И фактически в случае OP, submit не вызывается вообще. Поскольку это ajax'd, это обходит "автоматическое исправление" , описанное выше.

Ответ 12

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

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

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

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

Ответ 13

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