如何在 Angular 中捕获 tinyMCE 的全屏事件答案

【问题标题】：How to catch fullscreen event of tinyMCE in Angular如何在 Angular 中捕获 tinyMCE 的全屏事件
【发布时间】：2016-08-29 15:44:02
【问题描述】：

我在使用 angular 的可能网站中添加了 tinyMCE。我无法捕捉到 tinyMCE 的全屏事件。我在这里检查了主题并尝试了很多方法，但仍然没有成功。

-使用编辑器设置中的以下代码，我可以捕捉“更改”、“重做”、“撤消”事件：

setting = {
  selector: 'textarea',
  ...
  setup: function(e) {
    e.on('undo', function () {
      some codes;
    });
  },
};

但“全屏”似乎在这里不起作用，无论是工具栏上的按钮还是菜单中的按钮。

-我也尝试通过在 DOM 中找到全屏类来获得它：

if ( angular.element('.mce-fullscreen').length ) {
    console.log('fullscreen');
  }

请大家给点提示好吗？非常感谢。

【问题讨论】：

您尝试过FullscreenStateChanged 事件吗？ e.on('FullscreenStateChanged', function() { console.log("toogle"); })
谢谢，它与“FullscreenStateChanged”一起工作正常：）

【解决方案1】：

如果你查看fullscreen 插件的源代码，你会看到这一行：

editor.fire('FullscreenStateChanged', {state: fullscreenState});

...所以当您进入全屏模式时，编辑器将发出FullscreenStateChanged 事件。然后您可以像这样使用该事件：

setup: function (editor) {
   editor.on('FullscreenStateChanged', function () {
       console.log('FullscreenStateChanged event fired.');
   });
}

【讨论】：

谢谢你的回答:)，顺便说一句，请问我在哪里可以查看源代码？
TinyMCE 下载包括该产品的所有源代码。每个插件都位于 TinyMCE 中 plugins 文件夹内的自己的文件夹中。每个插件都有一个缩小版和非缩小版，因此您可以随时查看非缩小代码以了解编辑器的某个部分正在触发什么事件。