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


106

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

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

Ответы:


180

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


15
Использование TinyMCE 3.2+ с плагином jquery: $('#textarea_id').tinymce().save();в обработчике onSubmit вашей формы.
Brenden

@Brenden Я использую версию tinymce 3.5.8 и в консоли показывает ошибку, tinymce () не является функцией. Я исправил свою проблему с эльдаром
Code Prank

1
Лучший ответ, короткий, но приятный, а также самое чистое решение. Также работает с несколькими полями. Единственный недостаток в том, что это вызывает сохранение для всех элементов.
Хьюго Зинк,

tinymce.init ({селектор: 'textarea'});
сурадж

У Дэна Малкольма есть лучший ответ для текущей версии - см. Сообщение ниже - нужно еще 70 голосов, чтобы быть перечисленным первым.
Роберт

116

Вы можете настроить 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.


Отлично, теперь работает. Я не понимаю, почему что-то подобное не упоминается в документации редактора.
JohnA10

1
tinemce.triggerSave()вызывает save()функцию для ВСЕХ ваших активных редакторов. Если у вас их несколько, более эффективно настроить функцию onChange следующим образом:editor.on('change', editor.save);
DOOManiac

@DooManiac - Хороший звонок, спасибо. Обновлены ответ и jsfiddle. Я сохранил анонимную функцию в обратном вызове, чтобы гарантировать, что save вызывается как метод объекта редактора.
Dan Malcolm

В версиях tinymce выше 4.1.0 есть ошибка с полужирным и курсивным кнопками, для которых класс mce-active не добавляется напрямую (а только после ввода нескольких символов в поле textarea) - поэтому кнопки не смотри активировано ... проводное ... ( jsfiddle.net/9euk9/304 )
Уататаз

Отличное решение!
Шакил Ахмед

29

Из форм TinyMCE, jQuery и Ajax :

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

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

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

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

    tinyMCE.triggerSave();

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

27

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

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

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

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

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

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


1
Я делаю это с помощью плагина jquery ajaxForm, и значение textarea не передается до моей второй отправки, поэтому я думаю, что вы не можете изменить отправленные данные в обработчике onsubmit.
Brenden

1
@Brenden: если плагин также использует событие onsubmit для перехвата формы, тогда вы должны убедиться, что ваш обработчик событий запускается первым, иначе плагин соберет данные из формы, прежде чем у вас будет возможность переместить данные из формы. редактор в поле формы.
Guffa

Почему голос против? Если вы не объясните, что вы считаете неправильным, это не улучшит ответ.
Guffa

20

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

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

8

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

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

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


7

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

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

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

1
Использование tinyMCE.activeEditor.getContent () было единственным, с чем я мог работать. Спасибо!
MadTurki

1

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


1

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


1

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

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


Интересная находка. Вы имеете в виду версию 3.5.7? Я только что провел небольшое тестирование с 3.5.7 и 3.5.8, и на tinyMCE.triggerSave()самом деле у меня все отлично работает в нормальном режиме. Но вы правы, что в режиме jquery уже есть какое-то автоматическое сохранение, что противоречит tinymce.com/wiki.php/Plugin:autosave : «Этот плагин, скорее всего, будет расширен в будущем, чтобы обеспечить поддержку автоматического сохранения AJAX».
Sayap

0

Я просто скрываю () форму 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();
});

Меня устраивает.


0

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, это позволяет обходить "автоматическое исправление", описанное выше.


0

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

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

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

    tinyMCE.get('editor_id').setContent(tinyMCE.get('editor_id').getContent()+_newdata);
    tinyMCE.triggerSave();
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.