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

Answer 3

As mentioned by DarthJDG the setup init param is the way to go here

tinyMCE.init({

    ...

    setup: function(ed) {
        ed.onClick.add(function(ed, e) {
            if (e.target.nodeName.toLowerCase() == 'img') {
                alert('Img-Tag has been clicked!');
            }
        });
    },

    ....

});

Answer 4

I think the correct approach here has nothing to do with tinyMCE. As you wrote, you want to support multiple kinds of WYSIWYG editors.

My suggestion is that you simply use jQuery delegate events. You bind the event handler on your own dom element, somewhere "up stream" on the document. It will grab all the click events on the images that are nested below it, and then act accordingly.

See here: http://api.jquery.com/on/

I have used this method successfully several times to bind click events on elements that didn't yet exist (they are inserted to the dom dynamically by the user).