Bind Javascript event to JOOMLA MCE editor

Question

Any Expert may please respond

Till now what I dig out about JOOMLA editor is that

it belongs to tiny MCE

It uses iframe with contenteditable body tag.

Now what i am trying to do is to attach keyup event to body of iframe. But unsuccessful. What I have tried is as follow.

myEditorField_ifr is id of iframe that i figured through Google inspect element method though myEditorField is id that i assigned using JFORM method.

Method1

     $('#myEditorField_ifr').contents().find('body').on('keyup',function(e) {
        alert('bingo?');
     });
     unsuccessful

and also following approach that worked with my another iframe is also not working with tinyMCE

Method2

  $('.#myEditorField_ifr').load(function(){
           alert("hello");
           aaa= $('.#myEditorField_ifr').contents().find('body').on('keyup',function(e) {
        alert('bingo?');
     });

  })

through this approach even alert is not being executed. Is ther any mehod like editor->setcontent and editor->getcontent to attach events to TinyMCE???

and also one mini question is that this type of editor can be implemented without using iframe but why tinyMCE is using iframe???

Answer 1

wow i just solved it.

Problem was that my script was being executed before editor completely loads itself. and i am still unable to figure out why .load() is not working with MCE though .load() work successfuly on other iframes i tested.

So what i did was that i made a click event and .keyup() was attached to iframe body through that function. In my case this scenario was tolerable and feasible but may not be for your case.

so following is a chunk of code that worked perfectly and was showing alerts on every keyup in JOOMLA editor.

    $(".myDoButton").on("click",function(){
         aaa= $('.myPreviewEditor iframe').contents().find('body').keyup(function(){
         alert("hoklo");
    });

though this is only a temporary solution.