Jeremie Jeremie - 1 year ago 90
jQuery Question

Set a JavaScript ondblclick event to a class inside tinyMCE editor

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?

Answer Source

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:

    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.