How to detect changes in TinyMCE?

jquery, tinymce

Solution

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.

Problem

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?

Original source