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 Я використовую 3.5.8 версію tinymce, і в консолі він показує, що помилка tinymce () не є функцією. Я виправив свою проблему з eldar річ
Code Prank

1
Найкраща відповідь, коротка, але мила, а також є найчистішим рішенням. Працює і з кількома полями. Єдиним недоліком є ​​те, що це запускає економію для всіх елементів.
Хьюго Цинк

tinymce.init ({селектор: 'textarea'});
suraj

Ден Малькольм має найкращу відповідь на поточну версію - будь ласка, перегляньте повідомлення нижче - потрібно ще 70 додаткових пропозицій, щоб бути переліченими першими.
Роберт Гіс

115

Ви можете налаштувати 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 оновлено. Я зберегла анонімну функцію у зворотному дзвінку, щоб гарантувати, що збереження викликається як метод об’єкта редактора.
Ден Малькольм

Існує помилка з версіями tinymce вище 4.1.0 із жирними та курсивними кнопками, для яких клас "mce-active" не додається безпосередньо (але лише після введення кількох символів у полі textarea) - таким чином кнопки не дивіться активовано ... провідним ... ( jsfiddle.net/9euk9/304 )
Ouatataz

Чудове рішення!
Шейкел Ахмед

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

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


1
Я роблю це з плагіном jquery ajaxForm, і значення textarea не передається до мого 2-го подання, тому я думаю, що ви не можете змінити подані дані в он-лайн обробці.
Бренден

1
@Brenden: Якщо плагін також використовує подію onsubmit для перехоплення форми, вам потрібно переконатися, що ваш обробник подій запускається першим, інакше плагін буде збирати дані з форми, перш ніж у вас буде можливість перемістити дані з редактор в поле форми.
Гуффа

Чому потік? Якщо ви не поясните, що ви вважаєте неправильним, це не може покращити відповідь.
Гуффа

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

Тож я знайшов спосіб, який працював для мене (я додаю це сюди, тому що, можливо, інші люди вже спробували запустити 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().


1

@eldar: у мене була та сама проблема з 3.6.7, що працює в 'звичайному режимі'; ані триггерSave або save () не працювали

Я змінив плагін jQuery TinyMCE і не потребував нічого іншого, що працює зараз. Я припускаю, що десь уздовж лінії вони реалізували якусь автоматичну тригерSave для версії jQuery TinyMCE.


Цікава знахідка. Я вважаю, ви маєте на увазі версію 3.5.7? Я щойно робив тестування з 3.5.7 та 3.5.8, і tinyMCE.triggerSave()насправді працює нормально для мене у звичайному режимі. Але ви вірні, що в режимі jquery вже є якийсь режим автоматичного збереження, що суперечить tinymce.com/wiki.php/Plugin:autosave : "Цей плагін, швидше за все, буде розширений у майбутньому, щоб забезпечити підтримку автоматичного збереження AJAX."
скажи

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


0

Поперше:

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

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

    tinyMCE.get('editor_id').setContent(tinyMCE.get('editor_id').getContent()+_newdata);
    tinyMCE.triggerSave();
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.