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

(Редактор, звичайно, подбає про це сам, якби ви нормально розмістили форму, але, оскільки ви скребковуєте форму та відправляєте дані самостійно, не використовуючи форму, подія, що подається на формі, ніколи не спрацьовує.)

Коли ви запускаєте 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()не працював, не використовував жодного з інших методів.

Тож я знайшов спосіб, який працював для мене (я додаю це сюди, тому що, можливо, інші люди вже спробували запустити SaveS і т. Д.):

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 і не потребував нічого іншого, що працює зараз. Я припускаю, що десь уздовж лінії вони реалізували якусь автоматичну тригерSave для версії 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 до вашої textarea.

Щоб додати до інших відповідей, хоча - навіщо вам це потрібно? Я деякий час використовував 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: А насправді у випадку з ОП submitвзагалі не називають. Оскільки це ajax'd, це обходить описане вище "автоматичне виправлення".

Поперше:

1. Потрібно включити плагін tinymce jquery на свою сторінку (jquery.tinymce.min.js)

2. Один із найпростіших та найбезпечніших способів - це використання getContentта за setContentдопомогою тригер-збереження. Приклад:

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