Geek Answers Handbook

JQuery / javascript detects click inside the event tinymce

Simply, I want to detect when the image was pressed inside a text box tinymce.

Is it really impossible to achieve without creating a plugin? I can not use this method because I develop a plugin module for drupal wysiwyg, and I want to be compatible with all the editors supported wysiwyg.

onclick attribute in the image does not work, .click students do not work. wysiwyg api module has no documentation at all.

Does anyone know any solution to this? I just want to detect when the image was clicked, here it is ...

+4
source share
4 answers

Documentation - it's a good place to start.

You can transfer the function settings to bind events to initialize TinyMCE. Take a look at the demo: 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); }); } }); ({ $('textarea').tinymce({ setup: function(ed) { ed.onClick.add(function(ed, e) { alert('Editor was clicked: ' + e.target.nodeName); }); } }); { $('textarea').tinymce({ setup: function(ed) { ed.onClick.add(function(ed, e) { alert('Editor was clicked: ' + e.target.nodeName); }); } }); + e.target.nodeName); $('textarea').tinymce({ setup: function(ed) { ed.onClick.add(function(ed, e) { alert('Editor was clicked: ' + e.target.nodeName); }); } });
+6
source

In version Tinymce 4.x jQuery I was able to get the focus and blur events using the following method to configure

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'); }); }); } (). find ( 'body'). focus (function () { 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'); }); }); }
+3
source

As mentioned DarthJDG, setting the initialization parameter - this is the way here

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

I think the right approach here has nothing to do with tinyMCE. As you write, you want to support multiple types of WYSIWYG editors.

My suggestion is that you just use jQuery delegate events. You Bind an event handler to its own element dom, somewhere "up stream" in the document. It will capture all the events click on the images that are below it, and then act accordingly.

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

I have successfully used this method several times to associate the click event with elements that did not exist (they are dynamically inserted into the dom by a user).

0
source

More articles:


All Articles