Jquery/javascript detect click event inside tinymce

javascript jquery drupal tinymce wysiwyg

12,784

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

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

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

    ....

});

12,784

Author by

tobbr

Updated on June 05, 2022

Comments

tobbr almost 2 years

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...
tobbr almost 13 years

i get $("textarea").tinymce is not a function. tinymce in all its glory is lovley but like i said, i would prefer not to use editor dependent functions to accomplish this. however it looks like i'll have to rewrite the plugin for tinymce instead as this does not appear to be possible
DarthJDG almost 13 years

Apparently you are not using the TinyMCE jQuery plugin. Why did you tag jQuery then? Anyway, you can pass the above setup property wherever you call tinymce.init(). I think you should use editor dependent functions rather than some ugly hack that you can only hope it keeps working across different editors' future versions. Just write generic code of what you want to do, and plug it the proper way into each editor you want supported.
Thariama almost 13 years

$('textarea') won't work here, because the editor consists of an editable iframe created by tinymce, the former textarea becomes hidden and won't react when clicked!!!
DarthJDG almost 13 years

@Thariama: yes, that was just an example selector to create the editor from. It needs to be put wherever the editor is initialized. As he tagged jQuery, I assumed he's using the TinyMCE jQuery plugin, which takes exactly the same parameters and properties, and essentially exactly the same as tinyMCE.init().
DarthJDG almost 13 years

That's not really different from my solution. ;)
Thariama almost 13 years

it is. this part belongs inside the tinymce init function and $('textarea') won't work in your case
tobbr almost 13 years

I tagged jQuery because Drupal uses it and i assumed the jQuery plugin would be loaded by the wysiwyg module. tinymce is and object and i can access it from the console however not in the code as it says its not a function. This could be because .init() has already been called. i'm trying to figure out how to use the Drupal.wysiwygInit() function to call the tinymce.init() early enough but no luck so far.