jquery - html内容的onchange事件

Question

我有一个textarea, 并使用一个 JQuery 插件将它转换为一个简单的 HTML 编辑器。

问题是我不知道如何将 onchange 事件分配给 html 编辑器，因为将事件分配给 textarea 本身是行不通的。

该插件创建一个 iframe，这个 iframe 中的 HTML 是在 html 编辑器上显示的 html。

我还设法使用以下方法获取 HTML 内容：

var html = $("#txt_extradata").closest("tr").find(".sceditor-container iframe").contents().find("html").html();

现在，我如何编写一个事件来检测这个 html 是否随时间变化？

Answer 1

您需要使用上下文选择器绑定到 iframe 的主体，如下所示：

$(function() { 
     var ctx = $(".sceditor-container iframe").contents();
     $('body', ctx).blur(function() {
         //detect changes to the widget
     });
});

这会将 keydown 事件绑定到 iframe 的 body 标签。您可能会决定 keydown 不是您需要的适当事件，但无论如何，这将使您到达可以简单地绑定所需事件的位置。

编辑：

这是一个用于概念验证的 jsfiddle http://jsfiddle.net/SJQZN/

不幸的是，我无法让 jsfiddle 从他们的 github 存储库中正确加载 css，所以我自己做了一个快速破解。

Answer 2

结合此处和此处的答案。你现在有这个

$(".sceditor-container iframe").contents().find("body")
    .on("input propertychange", function() {
        // your method.
    });