Set a JavaScript ondblclick event to a class inside tinyMCE editor

Question

Some words in my tinyMCE textarea editor are in a span tag with a specific class called "myclass". For instance, the word Hello that is visible in the tinyMCE textarea editor is in the source code with the following HTML code:

<span class="myclass" id="hello">Hello</span>

I try to launch a function on double click on the word Hello.

The usual jQuery code does not work for words inside the tinyMCE editor:

$(document).ready(function() {
    $('.myclass').dblclick(function() {
        alert('class found');
    });
});

The function does not fire when I double click on the word Hello that is in the editor.

How can I bind the function to the tinyMCE editor?

Dekel Dekel · Accepted Answer · 2016-07-25T16:44:16

TinyMCE uses an iframe element, so you cannot use $('.myclass') on your "main" scope in order to get elements inside that iframe (The content of the iframe is a different scope).
Instead - you need to run $('.myclass').dblclick in the scope of that iframe.

To do so you can use the setup callback and the editor.on("init" event that TinyMCE gives you:

tinymce.init({
    selector:'textarea',
    setup: function(editor) {
          editor.on("init", function(){
              editor.$('p').on('dblclick', function() {
                  alert('double clicked');
              });
          });
    }
});

Live demo here.

Note that editor.$ is not a jQuery object, so you cannot do everything you are used to with jQuery, however it's pretty close.

Set a JavaScript ondblclick event to a class inside tinyMCE editor

1 Answers