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

Posted 2023-02-16

【中文标题】TinyMCE 工具栏在点击时显示并在点击时隐藏

【英文标题】：TinyMCE toolbar show on click and hide on click-out

【发布时间】：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/

【参考方案1】：

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

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

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

【讨论】：

嘿，我不能使用内联编辑器，因为我的验证规则需要一个文本区域。有没有其他办法？

你能创建一组隐藏的文本区域并在其中放置内容的副本吗？那么当您提交表单时包含 texarea 内容而不是内联 div 内容？在传统模式下，没有内置方法可以使工具栏像内联模式一样工作。