onchange event of html content

Question

I have a textarea , and using a JQuery plugin I convert it to a simple HTML editor.

The problem is that I don't know how to asign the onchange event to the html editor, since asigning the event to the textarea itself won't work.

The plugin creates an iframe and the HTML inside this iframe is the html displayed on the html editor.

I also manage to get the HTML content using:

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

Now, how can I write an event to detect if this html changes through time?

Answer 1

You need to bind to the body of the iframe by using a contextual selector like so:

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

This will bind a keydown event to the body tag of the iframe. You may decide that keydown is not the appropriate event for your needs but regardless, this will get you to where you can simply bind the event you want.

EDIT:

Here is a jsfiddle for proof of concept http://jsfiddle.net/SJQZN/

Unfortunately, I couldn't quite get jsfiddle to properly load the css from their github repository so I made do with a quick hack up of my own.

Answer 2

Combining answers from here and here . You now have this

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