Jquery/javascript detect click event inside tinymce

Question

Simple as that, i want to detect when an image has been clicked inside a tinymce editor textarea.

is this really not achievable without creating a plugin for it? i cant use this method because im developing a plugin for drupal's wysiwyg module and i want to to be compatibale with all editors that wysiwyg supports.

onclick in the image attributes wont work, .click listeners wont work. the wysiwyg module api has no documentation whatsoever.

anybody knows any solution to this? i just want to detect when an image has been clicked, thats it...

Answer 1

The documentation is a good place to start.

You can pass a setup function to bind TinyMCE events on initialization. Have a look at a demo here: http://jsfiddle.net/xgPzS/5/

HTML:

<textarea style="width:400px; height:400px;">
    some text
    <img src="http://www.hidekik.com/en/filelist/files/sample.jpg" />
</textarea>

Javascript:

$('textarea').tinymce({
    setup: function(ed) {
        ed.onClick.add(function(ed, e) {
            alert('Editor was clicked: ' + e.target.nodeName);
        });
    }
});

Answer 2

In Tinymce 4.x jQuery version, I only managed to get the focus and blur events by using the following method in the setup

JavaScript:

setup : function(ed) {
    ed.on('init', function() {
        $(ed.getDoc()).contents().find('body').focus(function(){
            alert('focus');
        });

        $(ed.getDoc()).contents().find('body').blur(function(){
            alert('blur');
        });  
    });
}