Question

我有textarea，并使用a JQuery plugin我将其转换为简单的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} {/ 3}}

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

Answer 2

结合here和here的答案。你现在有了这个

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

html内容的onchange事件

2 个答案: