[SOLVED] Capture event when iframe content changes

Capture event when iframe content changes

I'm using SCEditor plugin as the rich editor. This plugin generates an iframe inside my html page. When I type every thing, this editor adds some html element inside that iframe. Now, I need to capture event on changing iframe content. How can I do this?

This is the html code that plugin generates:

<div id="editor" ... >
     ...
    <iframe>
       <!DOCTYPE html>
       <html>
          <head>...</head>
          <body>
              //This content changes when i type every thing
          </body>
      </html>
    </iframe>
</div>

Solution

Use

$(pointerToContainerEditor).sceditor('instance')

(consider $(pointerToContainerEditor) a variable containing the same as you used with the .sceditor() method to initialize SCE.)
To get the editor instance you are using. Then use the methods

http://www.sceditor.com/api/sceditor/bind/
+
http://www.sceditor.com/api/sceditor/val/

Use .bind() to add an event listener to the editor. The most common DOM events are available. Use .val() get the current value at the current mode. Read the links above for more information, feel free to ask if you still didn't get it.