开发者

Add OnMouseover Event to TinyMCE Editor Instance

开发者 https://www.devze.com 2023-01-26 06:49 出处:网络
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

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({
  开发者_如何学Python.
  .
  .
  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.


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.


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号