tinyMCE textarea focusout event?

Question

I am working on existing project. I have to detect tinyMCE focusout/blur event to save it automatically via AJAX. I found following existing working code:

// reinit tinymce
$($("#chapterBill div:.module-container")[indexAfter]).find('textarea').each(function(i){
   editorId = $(this).attr('id');
   tinymce.EditorManager.execCommand('mceAddControl',true, editorId);
});

Can someone tell me that how to capture tinyMCE textarea focusout/blur event ?

Thanks

Answer 1

You do not want to capture textarea focus/blur. Tinymce hides the former textarea and creates a contenteditable iframe in which you can enter/edit content. This content gets written to the former hidden textarea from time to time (eventbased).

In order to capture focusout/blur on the editor you need to set a handler for this on the editors iframe.

Put this code into your tinymce init

setup : function(ed) {
    ed.onInit.add(function(ed, evt) {
        tinymce.dom.Event.add(ed.getDoc(), 'blur', function(e) {
            // Do something when the editor window is blured.
            alert('blur!!!');
        });
    });
},

Answer 2

I too was working on a solution in order to save tinyMCE content dynamically via AJAX. Many answers instruct to set this option in the init, however this convenience was not available to me, due to the fact that the code was being used across several systems. I required a page specific solution, which I was able to implement like so:

$( window ).load(function(){
    tinymce.get('id').on('blur', function(e) {
        var content = tinymce.get('id');
        console.log(content);
    });
});

With id being the id attribute set on your textarea element.