为tinyMCE全屏添加关闭按钮

发布于 2024-12-25 10:42:47 字数 428 浏览 1 评论 0原文

我想向tinyMCE编辑器添加关闭全屏选项。有时用户不知道他们必须单击工具栏中的“全屏”图标才能关闭全屏模式。所以在插件中我添加了这个：

$('#mce_fullscreen_container').click(function (e) {
    e.stopPropagation();
    tinyMCE.activeEditor.execCommand('mceFullScreen');
});

但是，当用户在所见即所得区域内单击时也会调用它。 mce_fullscreen_container 是所见即所得周围的灰色区域，我希望它能够在所见即所得编辑器本身外部单击时全屏模式将关闭。

我尝试应用容器内的 .not("#mce_fullscreen_container") ，但没有任何运气。

原文

I want to add a close full screen option to tinyMCE editor. Sometimes users don't know that they have to click "fullscreen" icon from the toolbar to close the fullscreen mode. so in the plug in I've added this:

$('#mce_fullscreen_container').click(function (e) {
    e.stopPropagation();
    tinyMCE.activeEditor.execCommand('mceFullScreen');
});

However, this is also called when the user clicks inside the wysiwyg area. mce_fullscreen_container is the gray area around the wysiwyg and I want it so that when clicked outside the wysiwyg editor itself the fullscreen mode will close.

I've tried applying .not("#mce_fullscreen_container") which is inside the container without any luck.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

昔日梦未散 2025-01-01 10:42:47

名为e的变量是点击事件。检查点击事件的目标，并根据该目标运行 tinyMCE.activeEditor.execCommand('mceFullScreen');（如果适用）。祈祷这有效，因为我目前无法测试它。

对于更高级的 TinyMCE 编程，请查看 setup 配置选项，该选项可以采用名为的函数，您可以使用该函数为编程事件配置编辑器。如果您需要做多件事，这非常有用。

http://www.tinymce.com/wiki.php/API3 :event.tinymce.Editor.onClick

该示例在您的上下文中很有用，因为它可能是让 TinyMCE 执行您想要的操作的更简洁的方法：

// Adds an observer to the onClick event using tinyMCE.init
tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onClick.add(function(ed, e) {
          console.debug('Editor was clicked: ' + e.target.nodeName);
          // check target here to see if it is your close button and if so...
      });
   }
});

The variable named e is the click event. Check the target of the click event and based on that run tinyMCE.activeEditor.execCommand('mceFullScreen'); if appropriate. Fingers crossed that works as I have no way to test it at the moment.

For more advanced TinyMCE programming, look at the setup configuration option which can take a function named that you can use to configure the editor for programmatic events. It's very useful if you need to do multiple things.

http://www.tinymce.com/wiki.php/API3:event.tinymce.Editor.onClick

The example is useful in your context as it may be a cleaner way of getting TinyMCE to do what you want:

// Adds an observer to the onClick event using tinyMCE.init
tinyMCE.init({
   ...
   setup : function(ed) {
      ed.onClick.add(function(ed, e) {
          console.debug('Editor was clicked: ' + e.target.nodeName);
          // check target here to see if it is your close button and if so...
      });
   }
});

回复收藏 0 原文

~没有更多了~