How to detect changes in TinyMCE?

user2603482 picture user2603482 · Jul 23, 2013 · Viewed 94.1k times · Source

I added TinyMCE(version 4.0.2) editor in a existing HTML form in my project(PHP,Codeigniter). My final target is to enable the form submit button if any changes occur in the form including TinyMCE editor. I can do it only with the form except TinyMCE editor. I could not detect TinyMCE changes.

I want to detect if any change occur when key up. I have seen that tinymce has an onchange function like bellow.

            setup : function(ed) {
            ed.onChange.add(function(ed, l) {
                console.debug('Editor contents was modified. Contents: ' + l.content);
            });

I putted upper setup code inside the bellow init function, but no output i have found.

tinymce.init({ });

Can you tell how to detect change, or any better idea?

Answer

sica07 picture sica07 · Oct 4, 2013

I'm late to the party, but for future reference here is how you do it in TinyMCE 4.X:

tinyMCE.init({
   setup:function(ed) {
       ed.on('change', function(e) {
           console.log('the event object ', e);
           console.log('the editor object ', ed);
           console.log('the content ', ed.getContent());
       });
   }
});