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.
    });