如何检测jQuery对使用jWYSIWYG插件的文本区域内容的更改？

Question

我在我的表单( jwysiwyg：https://github.com/akzhan/jwysiwyg )中对文本form使用jwysiwyg插件

我想要检测表单中任何文本区域的变化。

通常，对于标准的非所见即所得文本区域，我会这样做：

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

当由于jwysiwyg的DOM操作而使用jwysiwyg时，这被证明是无效的。

有谁有什么建议吗？

Answer 1

使用这段代码，我已经用help/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)

                }
    });

});

源

Yasir Laghari和Ghommey是这个解决方案的真正功劳。

jQuery/JavaScript: accessing contents of an iframe

On keypress, when stop after X seconds call function

说明

1) 'jwysiwyg plugin‘它所做的就是用一个iframe替换textarea。文本在一个'p‘标签中，另一件要考虑的事情是这个标签不能被点击，如果你点击这个文本，你实际点击的是'iframed html’标签。

2)为了让jQuery访问和选择iframed元素，必须使用“contents()”方法。这样我们就可以开始用iframe触发一些函数了。

3)创建detectFn()，它将在检测到伪文本区域中的更改后执行您想要使用的代码。

4)声明变量'timer‘。

5) bind()方法必须与'iframed html‘标记一起使用，才能使用keyup事件。这样就可以模拟文本区域的键入操作。

6)每个keyup将多次执行检测函数，为了防止这种情况，我们使用setTimeout方法并将计时器存储在变量‘detectFn’中。最后，必须将变量作为参数传递给clearTimeout，这样每次键控都会取消以前执行的detect函数。

Answer 2

我发现这要简单得多：

    $('#editor_textarea').wysiwyg('document').keypress(function(e) {
        e.preventDefault(); //This will cancel the keypress
        alert('Keypress in jwysiwyg editor detected!');
    });

Answer 3

您可以将autoSave设置为true，并执行以下操作：

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

如果需要，您可以在此处理程序中触发元素的“更改”