Detecting Changes In Text In The Cute Editor Using jQuery

Question

I have developed a small script with some logic to check to see if an ASP.Net forms values have been updated since page load so that I can display a "You have unsaved changes" type message to the user if they attempt to close the browser window or more to another tab within the browser window.

The only control that I have not been able to hook upto with this script is the Cute Editor 3rd Party WYSIWYG text edit control. The control seems to be rendered using some smoke and mirrors involving iframes.

Now I have tried everything I can to hook the jQuery .change() and .keyup() events to this control as I have with all the other controls with no luck. I don't seem to be able to catch the changes or actually find the containing control that holds the text.

Has anyone done much with this control or managed to achieve something similar?

Answer 1

almost all of the wysiwyg editors use iframes in one way or another, so you have to pull the info out of that that you're looking for. To do that, you can call

$('#myIframe').contents();

That gives you the (html) document residing in the iframe. You can then attach to an element in that document to setup change tracking using whatever method you're currently using.