Forum Discussion

PerBonomi's avatar
7 years ago

Detect changes in the tinyMCE ActiveEditor

Does anyone know how to achieve this?

  • PerBonomi - Try below updated code.  You need to add an event on the active editor. 

    var ed = tinymce.activeEditor; 
    ed.on('change', function(e) {
             console.log('the event object ', e);
    console.log('the editor object ', ed);
    console.log('the content ', ed.getContent()); });

     

     

8 Replies

  • PerBonomi- Try below code.

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

     

  • PerBonomi's avatar
    PerBonomi
    Boss
    7 years ago
    ​Thanks. Tried something along those lines, and this gets me the same
    result I see Promise pending, but nothing happens on edit.​
  • TariqHussain's avatar
    TariqHussain
    Boss
    7 years ago

    PerBonomi - Try below updated code.  You need to add an event on the active editor. 

    var ed = tinymce.activeEditor; 
    ed.on('change', function(e) {
             console.log('the event object ', e);
    console.log('the editor object ', ed);
    console.log('the content ', ed.getContent()); });

     

     

  • PerBonomi's avatar
    PerBonomi
    Boss
    7 years ago

    Looking at the solution now, it's so obvious. Thanks so much!

     

    PS I noticed the 'change' event only fires on blur. If you make it something like 'keyup' it fires immediately.

  • TariqHussain's avatar
    TariqHussain
    Boss
    7 years ago

    PerBonomi - 

     

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

    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

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

     

  • PerBonomi's avatar
    PerBonomi
    Boss
    7 years ago

    Great tip, thanks again.

    I've changed it to capture them all.

     

    	ed.on('keyup change paste cut', function(e) {
    		console.log('the event object ', e);
    		console.log('the editor object ', ed);
    		console.log('the content ', ed.getContent());
    	});
  • TariqHussain's avatar
    TariqHussain
    Boss
    7 years ago

    PerBonomi-

    Just one more point,

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

     

    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

    I found his from stackoverflow, might be helpful in your use case as well.

  • PerBonomi's avatar
    PerBonomi
    Boss
    7 years ago

    Another good point. Did some testing and research. I'll just capture the respective keys and not run in those instances.

    var arKeys = [16,17,18,45,91,92,93,224]; // shift,ctrl,alt,ins and Apple keys
    ed.on('keyup change paste cut', function(e) {
    	if(arKeys.indexOf(e.keyCode) < 0 && e.keyCode != undefined) {
    		console.log(e.keyCode);
    	}
    });