Как обнаружить с помощью jQuery содержимое текстовой области, использующей плагин jWYSIWYG? - PullRequest
Новая
       21

Как обнаружить с помощью jQuery содержимое текстовой области, использующей плагин jWYSIWYG?

2 голосов
/ 27 января 2012

Я использую плагин jwysiwyg для текстовых полей в моей форме (jwysiwyg: https://github.com/akzhan/jwysiwyg)

Я хочу обнаружить изменения в любой текстовой области, которая находится в моей форме.

Обычно, со стандартной текстовой областью без wysiwyg, я делаю: 

$('textarea').change(function(e){
    alert('Something changed!');
 });

Это оказывается неэффективным, когда jwysiwyg используется из-за манипуляции DOM jwysiwyg.

У кого-нибудь есть указатели?

Ответы [ 3 ]

4 голосов
/ 28 января 2012

Используйте этот код, я протестировал его с помощью / example / 01.basic.html и 02.full.html, Я думаю, что это будет работать и с другими: 

$(document).ready(function(){
var current = $("#wysiwyg-wysiwyg-iframe").contents().find('html');

     function detectFn(){
          alert('Detected');
       } 

       var timer;

    current.bind({    
                keyup: function(){
                    clearTimeout(timer);
          timer = setTimeout(detectFn, 2000)

                }
    });

});

Источники :
Ясир Лагхари и Гомми действительно ценят это решение.

jQuery / JavaScript: доступ к содержимому iframe

При нажатии клавиши, когда останов через X секунд вызывает функцию

Объяснение

1) «Плагин jwysiwyg» заменяет текстовое поле на iframe. Текст находится внутри тега 'p', еще одна вещь, которую следует учитывать, это то, что этот тег нельзя щелкнуть; если вы щелкаете текст, то на самом деле вы нажимаете тег 'iframed html'.

2) Чтобы jQuery мог получить доступ к элементу iframed и выбрать его, необходимо использовать метод contents (). Таким образом, мы можем начать запуск некоторых функций с помощью iframe.

3) Создайте DetectFn (), который будет выполнять код, который вы хотите использовать после обнаружения изменения в поддельной текстовой области.

4) Объявить переменную 'timer'.

5) Для использования события keyup необходимо использовать метод bind () с тегом iframed html. Таким образом, будет смоделировано печатное действие текстовой области.

6) Каждый keyup будет выполнять функцию обнаружения несколько раз, чтобы предотвратить это, мы используем метод setTimeout и сохраняем DeteFn в переменной 'timer'. Наконец, переменная должна быть передана в clearTimeout в качестве аргумента, таким образом, каждое нажатие клавиши отменяет предыдущее выполнение функции обнаружения.

1 голос
/ 06 мая 2012

Я обнаружил, что это намного проще: 

    $('#editor_textarea').wysiwyg('document').keypress(function(e) {
        e.preventDefault(); //This will cancel the keypress
        alert('Keypress in jwysiwyg editor detected!');
    });
0 голосов
/ 08 июля 2014

Вы можете установить autoSave в true и делать так:

$ (element) .wysiwyg ('getContent'). AfterSave (function () {/ magic /}

если вы хотите, вы можете запустить 'изменение' элемента в этом обработчике

...