How to detect changes in TinyMCE?

Question

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 1

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

Answer 2

For Tinymce 4 it works for me,

        editor.on('keyup', function(e) {             alert('keyup occured');             //console.log('init event', e);             console.log('Editor contents was modified. Contents: ' + editor.getContent());             check_submit(); //another function calling         }); 

EDIT:

Note that keyup won't capture all cases. for example copy/paste/cut from menu and not from keyboard

if you want you can capture those with

editor.on('paste', function(e) {                     console.debug('paste event');                  });  editor.on('cut', function(e) {                     console.debug('cut event');                  }); 

NOTE if you capture cut and paste from tinymce you should probably not process those event from keyup. What I did is to do save only if the keys are not keys for cut & paste i.e :

 /**  * MCE keyup callback, update the master model selected attribute  *   * @method tinyMCEKeyup  */  tinyMCEKeyUp : function(e) {         console.log('tinymce:keyup');            var ctrlDown = false;          var ctrlKey = 17, vKey = 86, xKey = 88;            if ((e.ctrlKey) && (e.keyCode === vKey)) {              console.log('paste from keyboard')              /* got here. do nothing. let paste event handle this one  */              return;          } else if ((e.ctrlKey) && (e.keyCode === xKey)) {              console.log('cut from keyboard')              /* got here. do nothing. let paste event handle this one  */              return;          }           this.doSave();  }, 

and call this function from the keyup event. This way you will save yourself do some actions twice on cut & paste

NOTE soon you will figure out that any style changes that happens from menu will NOT trigger those event as well..

I'm still looking for an answer to capture style change.