Как обнаружить изменение формы HTML, когда форма может содержать текстовые области tinyMCE? - PullRequest
Новая
       9

Как обнаружить изменение формы HTML, когда форма может содержать текстовые области tinyMCE?

1 голос
/ 09 апреля 2011

Мне нужен общий способ обнаружения изменения формы HTML. Форма может содержать текстовые области, имеющие функции WYSIWYG через tinyMCE.

Метод serialize (), описанный здесь , не будет работать, так как tinyMCE переопределяет теги textarea в html и заменяет их необычным редактором js. Исходное значение текстовой области останется неизменным при внесении изменений в редакторе WYSIWYG.

Какой самый простой и компактный способ реализовать универсальную функцию обнаружения изменений, при условии, что у меня нет никакой дополнительной информации о полях формы - т.е. я не знаю явно, к каким полям формы может быть прикреплен tinyMCE ? Я использую jquery 1.4, но любой (не зависящий от фреймворка) подход js был бы очень признателен.

1 Ответ

0 голосов
/ 09 апреля 2011

Я закончил с использованием функции tinyMCE.Editor.save () перед сериализацией формы.

Используя jQuery, код я выглядит следующим образом: 

// Unified form serialization, also serializes tinyMCE textarea contents
$.fn.saveState = function() {
    var $form = $(this);
    $form.find('textarea').each(function() {
        tinyMCE.get($(this).attr('name')).save();
    });
    $form.data('original_value', $form.serialize());
};

// Unified form change check, also detects tinyMCE textarea changes
$.fn.formChanged= function() {
    var $form = $(this);
    $form.find('textarea').each(function() {
        tinyMCE.get($(this).attr('name')).save();
    });
    return ($form.data('original_value') !== $form.serialize());
};

После document.ready я вызываю функцию saveState () для каждого элемента формы в документе.Затем я установил таймер, который будет вызывать функцию formChanged (), чтобы увидеть, есть ли какие-либо изменения.Если да, я инициирую свое действие (в моем случае - автоматически сохраняю текущее состояние формы на сервере) и снова вызываю saveState ().Это не будет работать, если у вас есть смешанные текстовые области на вашей странице, некоторые из них имеют прикрепленный tinyMCE, а некоторые нет.В этом случае вы можете использовать идентификацию на основе классов - например, $ form.find ('textarea.tinyMCEAttached') ...

Предложение Кевина Пено использовать onChange () не сработало для меня.onChange срабатывает только при размытии, и мне нужно было обнаружить изменения формы, даже если пользователь не покидает область редактора.Однако, это указало мне правильное направление, спасибо Кевину!

...