Question

I would like to add onMouseOver and onMouseOut events to an editor instance within TinyMCE (through a plugin), but they seem not to be supported by TinyMCE's API. Specifically, I would like a control to appear when the element is moused over to toggle "read-only" mode (and possibly other things). Would I have to add code myself to TinyMCE to do this, or is it supported through some non-obvious route? If I do have to add code, is there some prohibition against supporting these events that forms the basis of their reasoning for not including it in the API?

To clarify for the benefit of those with the same confusion as responders below, I am specifically wishing to attach an event to the TinyMCE.Editor instance that is created by the TinyMCE library (the class that is, for instance, passed to the callback used in the setup parameter of TinyMCE.init). I wish to do the following

tinyMCE.init({
  .
  .
  .
  setup : function(ed) { 
    TinyMCEReadOnlySetup(ed,true); 
    ed.onMouseOver.add(ShowButton(ed));
    ed.onMouseOut.add(HideButton(ed));
  },
  .
  .
  .
});

, but ed (an instance of TinyMCE.Editor) does not support MouseOver.add in the fashion of similar events.

Was it helpful?

Solution 2

Alright, I was able to get this to work by creating a plugin, then adding the following very hack-y code in the init attribute:

ed.onInit.add(function(ed){
                   .
                   .
                   .

    document.getElementById(ed.id + '_parent').setAttribute('onmouseover',
      "tinyMCE.editor_ShowButton('" + ed.id + "');");
    document.getElementById(ed.id + '_parent').setAttribute('onmouseout',
      "tinyMCE.editor_HideButton('" + ed.id + "');");
    //ed.getBody().appendChild(newdiv);
 });

It's not an optimal solution, but it gets the job done.

OTHER TIPS

To toggle between read-only and edit mode you may use

ed.getDoc().designMode = "Off";

in your own plugin. Alternatively, you can save the editor content and restore it if onChange is fired.

EDIT:

To set a mouseover event listener you may use

$('#' + ed.id +'_parent').bind('mouseover',function (evt){
   setTimeout("console.log('mouseover')",50);return false;
});

You could do this in the onInit part of your plugin.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top