javascript - 如何在 TinyMCE 上添加一个按钮来切换工具栏可见性？

Question

我的 tinyMCE 编辑器上有 2 个工具栏(2 行)，我想在第一个工具栏上添加一个按钮来显示/隐藏第二个工具栏。

基本上是一个展开/折叠按钮。默认情况下，第二个工具栏仅在单击按钮时不可见。然后该按钮应更改图标(类似于从 chevron-down 到 chevron-up)，再次单击时应隐藏第二个工具栏。

它也可以是一个静态按钮，表示类似于显示/隐藏第二个工具栏的高级选项。

我没有找到任何实现此目的的 tinymce 插件。有谁知道如何实现这个或已经执行此操作(或接近执行此操作)的插件？

Answer 1

TinyMCE 没有执行此操作的 API，但您可以根据 TinyMCE 放置在包含每个工具栏的 DIV 上的类来执行此操作。

如果您查看 TinyMCE 用来呈现工具栏的 DIV，您会看到类似这样的内容:

<div id="mceu_41" class="mce-container mce-toolbar mce-stack-layout-item 
mce-first" role="toolbar"></div>
<div id="mceu_49" class="mce-container mce-toolbar mce-stack-layout-item 
mce-last" role="toolbar"></div>

(我省略了每个 DIV 中的一大堆 HTML)

最后一行工具栏将包含类 mce-toolbar 和 mce-last。使用 jQuery，您可以使用 toggle() 方法轻松显示/隐藏该 DIV。只需制作一个工具栏按钮并将其添加到工具栏按钮的第一行:

editor.addButton('hidetoolbar2', {
    text: 'Hide Toolbar 2',
    onclick: function () { 
        $('div.mce-toolbar.mce-last').toggle();
    }
});

...和...

tinymce.init({
  selector: 'textarea',
  ...
  toolbar: [
    "hidetoolbar2 | insertfile...",
    "removeformat | fontsizeselect..."
  ],
  ...
}