Event callback not getting tinymce target information

Question

I have two instances of tinymce on a page, and when they're altered, I want to update a Javascript object that's eventually saved to localStorage.

When the page loads, I have no problem populating the two tinymce instances from localstorage , but when they're changed, I can't seem to pass along an appropriate jQuery event which includes event.target information to my update handler. I suspect it's due to an iframe, but I'm stumped.

In my update callback, I need to know e.target and e.target.id, but it passes an object that doesn't include that information, something like this:

{isTrusted: true, screenX: 953, screenY: 790, clientX: 298, clientY: 20…}

tinymce.init({             
         setup:function(ed){
              ed.on("init",function(e){
                  switch(e.target.id){                             
                      case "intro":
                          _content = obj.INFO.INTRO.TEXT;
                          break;
                      case "conclude":
                          _content = obj.INFO.CONCLUDE.TEXT;
                          break;
                      }
                      tinyMCE.activeEditor.setContent(_content);
         });
         ed.on("change",function(e){
              //update(jQuery.Event("edit",{target:$(e.currentTarget).find("body")}));
              //jQuery.Event("edit",{target:e.currentTarget})
              update(e);
         });
         ed.on("keyup",function(e){
              //update(jQuery.Event("edit",{target:$(e.currentTarget).find("body")}));
              update(e);
         });
         ed.on("click",function(e){
              //update(jQuery.Event("edit",{target:$(e.currentTarget).find("body")}));
              //jQuery.Event("edit",{target:tinyMCE.activeEditor, editor:tinyMCE.activeEditor.id})
              update(e);
         });
    }
});

Answer 1

The problem here is for you to get the editor id. You can get it using the following:

setup:function(ed){
     ed.on("init",function(e){
               console.log('target id:',e.target.id);
     });
     ed.on("click",function(e,f){
       var editor_id = e.view.frameElement.id.slice(0, -4);
       console.log('editor_id:', editor_id);

       // or much easier using ed.id
       editor_id = ed.id;

       // if you want to address the editor body you can use ed.getBody()

       var my_editor = tinymce.get(editor_id);
       // update(e);
     });
},

For a live example seethe tinymce fiddle i created: http://fiddle.tinymce.com/6mfaab/1