将 OnMouseover 事件添加到 TinyMCE 编辑器实例答案

【问题标题】：Add OnMouseover Event to TinyMCE Editor Instance将 OnMouseover 事件添加到 TinyMCE 编辑器实例
【发布时间】：2010-11-23 13:56:50
【问题描述】：

我想将 onMouseOver 和 onMouseOut 事件添加到 TinyMCE 中的编辑器实例（通过插件），但 TinyMCE 的 API 似乎不支持它们。具体来说，我希望在元素被鼠标悬停以切换“只读”模式（可能还有其他东西）时出现一个控件。我是否必须自己将代码添加到 TinyMCE 才能做到这一点，还是通过一些不明显的途径支持它？如果我必须添加代码，是否有一些禁止支持这些事件，这些事件构成了他们不将其包含在 API 中的推理基础？

为了澄清那些与下面的响应者同样困惑的人的利益，我特别希望将一个事件附加到由 TinyMCE 库创建的 TinyMCE.Editor 实例（例如，传递给TinyMCE.init 的设置参数中使用的回调）。我希望做以下事情

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

，但是 ed（TinyMCE.Editor 的一个实例）不支持 MouseOver.add 以类似事件的方式。

【问题讨论】：

“添加到 tinymce 实例”是什么意思，您希望将其添加到实例或 html 元素上？
我的意思是由 TinyMCE 从它被激活的元素中创建的编辑器实例，并为其创建 JavaScript TinyMCE.Editor 对象实例 (wiki.moxiecode.com/index.php/TinyMCE:API/tinymce.Editor)

标签： javascript tinymce onmouseover onmouseout

【解决方案1】：

要在只读模式和编辑模式之间切换，您可以使用

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

在您自己的插件中。或者，您可以保存编辑器内容并在触发 onChange 时将其恢复。

编辑：

要设置鼠标悬停事件侦听器，您可以使用

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

您可以在插件的 onInit 部分执行此操作。

【讨论】：

实际上不是问题。我想知道如何将 onmouseover 事件附加到编辑字段，而不是如何切换只读和编辑模式。
这通常可能是一个很好的解决方案，但不幸的是 jQuery 不适用于这个子项目。我相信我可以使用 ed 对象的 dom 属性，如果它有效，我会发布我的结果。

【解决方案2】：

好的，我可以通过创建一个插件来实现它，然后在 init 属性中添加以下非常hack-y的代码：

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);
 });

这不是最佳解决方案，但可以完成工作。

【讨论】：