JavaScript ondblclickイベントをtinyMCEエディタ内のクラスに設定します

Question

私のtinyMCEテキストエリアエディタのいくつかの単語は、 "myclass"という特定のクラスを持つスパンタグにあります。例えば、TinyMCEをテキストエリアエディタに表示されている単語こんにちはは、次のHTMLコードとソースコードである：

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

私は言葉こんにちはをダブルクリックして上の機能を起動してみてください。

通常のjQueryのコードはTinyMCEのエディタ内の単語のために動作しません。私はエディタである単語こんにちはをダブルクリックしたときに

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

機能が起動しません。

どのように関数をtinyMCEエディタにバインドできますか？

Answer 1

TinyMCEはiframe要素を使用していますので、 "iframe内の要素を取得するために"メインスコープに$('.myclass')を使用することはできません（iframeの内容は異なるスコープです）。
代わりに、$('.myclass').dblclickをそのiframeのスコープ内で実行する必要があります。

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

ライブデモhereを：あなたはTinyMCEのがあなたに与えることsetupコールバックとeditor.on("init"イベントを使用することができ、そうするには

。 editor.$がjQueryオブジェクトではないので、あなたは、あなたがjQueryを使ってに使用されているすべてを行うことができないこと

注意、しかし、それは非常に近いです。