TinyMCE 工具栏在点击时显示并在点击时隐藏答案

【问题标题】：TinyMCE toolbar show on click and hide on click-outTinyMCE 工具栏在点击时显示并在点击时隐藏
【发布时间】：2016-06-28 16:32:26
【问题描述】：

我不知道如何在点击时显示/隐藏 TinyMCE 菜单栏。

在 div 上调用 click 事件是不可能的，因为它上面有一个 iframe。它适用于 Tiny 设置，但只能在编辑器中使用。
如果单击菜单栏，它会再次消失。

如果你看到演示，我认为你会做得更好：

有什么建议吗？谢谢

HTML

<textarea>Test</textarea>

jQuery

$(function() {

  $(window).click(function() {
    $(".mce-toolbar-grp").hide();
  });

  $(".mce-toolbar-grp").click(function(e) {
    e.stopPropagation();
  });

  tinymce.init({
    selector: 'textarea',
    menubar: false,
    init_instance_callback: function(ed) {
      $($(this)[0]["editorContainer"]).find(".mce-toolbar-grp").hide();
    },
    setup: function(ed) {
      ed.on("click", function() {
        $(".mce-toolbar-grp").show();
      });
    }
  });
});

https://jsfiddle.net/oy5bqtmh/3/

【问题讨论】：

标签： jquery click tinymce menubar

【解决方案1】：

您所描述的实际上是 TinyMCE 已经提供的内联编辑模式：

https://www.tinymce.com/docs/demo/inline/

您是否有不想使用内联编辑的原因？

【讨论】：

嘿，我不能使用内联编辑器，因为我的验证规则需要一个文本区域。有没有其他办法？
你能创建一组隐藏的文本区域并在其中放置内容的副本吗？那么当您提交表单时包含 texarea 内容而不是内联 div 内容？在传统模式下，没有内置方法可以使工具栏像内联模式一样工作。