tinyMCE textarea focusout event?
Asked Answered
C

2

6

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

Cadaverous answered 9/1, 2012 at 16:6 Comment(0)
A
5

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!!!');
        });
    });
},
Azurite answered 10/1, 2012 at 9:29 Comment(3)
I think there are some problems with blur in Google Chrome. It is working perfectly in Firefox.Cadaverous
This does not work in Chrome. The focus and blur events are only fired in Firefox.Maure
what about using jQuery here: $(ed.getDoc()).bind('blur', function(e){alert('blur!!!');});Azurite
B
0

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.

Biradial answered 13/4, 2015 at 20:20 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.