如何使用jQuery检测使用jWYSIWYG插件的文本区域内容的变化？

Question

我在表单中的文本区域使用jwysiwyg插件（jwysiwyg:https://github.com/akzhan/jwysiwyg）

我想检测我表单中任何文本区域的更改。

通常，对于标准的非wysiwyg文本区域，我会：

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

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

有人有什么线索吗？

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:访问iframe 的内容

按键时，X秒后停止调用功能

解释：

1） "jwysiwyg插件"的作用是将文本区域替换为iframe。文本在"p"标记内，另一件需要考虑的事情是这个标记无法点击，如果你点击文本，你实际点击的是"iframe html"标记。

2） 为了让jQuery访问并选择iframe元素，必须使用"contents（）"方法。这样我们就可以开始用iframe触发一些函数。

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

4） 声明变量"timer"。

5） bind（）方法必须与"iframe html"标记一起使用才能使用keyup事件。这样就可以模拟文本区域的键入操作。

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

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）.wysiyg（'getContent'）.fafterSave（function（）｛/magic/｝

如果您愿意，您可以在此处理程序中触发元素的"更改"