How to detect changes in TinyMCE?

tinymce keyup event
tinymce isdirty
tinymce set content
tinymce api
tinymce get
tinymce documentation
tinymce blur event
tinymce addcommand

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?

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

Dynamically Add and remove TinyMCE editor with jQuery, This function is called once the user "blurs" the area (in the same way a textarea or input field is blurred upon exiting that field) and it will check if a change has  EDIT: I accomplished that in the HTML pane associating a jQuery keyup event in the hidden textarea that tinyMCE create, but still I've not been able to detect user input in the Visual tab. I'm using Wordpress 3.2.1 and I know that they are using tinyMCE for the rich text editor functionality.

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.

Fired when the editor content changes have been commited, such as when moving focus away from the editor. Redo, { level: UndoLevel }, Fired when a change is  How do I detect in JavaScript if the content of a wp_editor tinyMCE instance has changed in WordPress 4.2.2? I've tried with tinyMCE.editors["content"].isDirty() but the result is always false.

That works for me:

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

also

ed.on('SaveContent', function(e) {  

or

ed.on('submit', function(e) {

Found on page http://www.tinymce.com/wiki.php/api4:class.tinymce.Editor in Section Event

Change, core, Fires when undo level is added to the editor. Dirty, core Here is an example of how to detect when editor.remove() was called. tinymce.init({  tinymce on jQuery change event change content on each textarea I have select box on change event i'm getting data from database based on the selected option

The following will capture "keyup" and other change events (copy, paste, center, etc.):

tinymce.init({
    setup: function (ed) {
        ed.on('keyup', function (e) {
            tinyMceChange(ed);
        });
        ed.on('change', function(e) {
            tinyMceChange(ed);
        });
    }
});

function tinyMceChange(ed) {
    console.debug('Editor contents was modified. Contents: ' + ed.getContent());
}

how to change default behaviour of onChange, I want to call onChange as editor content is changed ??????? Open the page, on which you integrate the tinyMCE and press Control+Shift+J. and type following command. tinyMCE and the output of the above the command, will show both major version, minor version and release date as shown in figure.

Im using this in tinymce 4.x

tinymce.init({
    selector: "#tinymce-textarea",
    setup : function(ed) {
        ed.on("change", function(e){
            $('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
        });
        ed.on("keyup", function(){
            $('#tinymce-livepreview').html(tinymce.activeEditor.getContent());
        });
   }
});

Explanation:

on("change") is for detect changes on mouse event if u click toolbar icon or selection from the menu. It also able to detect the keyboard event but only after lost focus (not real time).

on("keyup") is for detect changes on real time keyboard event

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. J'ai ajouté TinyMCE(version 4.0.2) éditeur Dans un format HTML existant dans mon projet (PHP,Codeigniter). Mon objectif final est d'activer le bouton soumettre le formulaire si des changements se produisent dans le formulaire, y compris L'éditeur TinyMCE. Je ne peux le faire qu'avec le formulaire sauf L'éditeur TinyMCE.

I am trying to use angular2-tinymce library in my project. any callback for change event when any changes happened in the tinymce editor. resolve support issues via the issue tracker, please check out this explanation. > Note: This feature is only available for TinyMCE 5.1 and later. tap (Same data as the native touchend event) Fired when a tap occurs on a touch device inside the editor (simulated event similar to click). > Note: This feature is only available for TinyMCE 5.1 and later. ScrollContent (Same data as the native scroll event)

If I try to make the changes before TinyMCE is set up, I (obviously) receive JS errors. Without needing to modify any core files, and ideally using JS/jQuery events  Teams. Q&A for Work. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information.

When used in combination with the WYSIWYG Module and the TinyMCE editor changes to the body field are not detected when the editor is  JavaScript API reference for TinyMCE. Can't find what you're looking for? Let us know. Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.

Comments
  • note that change event will fire only when editor has lost focus ( for write changes) . this should be combine with the next answer. in order to capture format/drag & drop change
  • @Rooster242 editor is setup argument like setup : function(editor) {}
  • It didn't occur to me to check for pasting. Thank you!
  • This 'NodeChange' is the only thing that will detect color changes - 4.1.2.
  • I 'keyup' and 'NodeChange' and it is working now ed.on('NodeChange', function(e) {}); ed.on('keyup', function(e) {});
  • Well this is useless. 'NodeChange' is firing simply by moving the cursor around in the document.
  • Pay attention to this answer, folks. This is probably the best one. It's the only one that truly raises an event immediately when any change is made.
  • I used it, but where to find the result when any change occur. Can you tell me please?
  • But when using this code the tinymce editor box disappear. Can you tell please why disappear?
  • I tried it, and my editor box disappeared, too - I think it's because onChange is no longer a function in 4.x. Theoretically, they've replaced it with a similar function named "change", but that's not working for me at all.
  • Would be useful if it took care of undo and redo as well since those operations also change ur editor content. Like Nagy Zoltáns answer