如何在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..."
  ],
  ...
}

Answer 2

我在init函数中的一些代码：

tinyMCE.init({
    selector: '.selector',
    branding: false,
    plugins: 'print preview paste searchreplace autolink directionality code visualblocks visualchars fullscreen image link media template codesample table charmap hr pagebreak nonbreaking anchor toc insertdatetime advlist lists textcolor wordcount imagetools contextmenu colorpicker textpattern',
    toolbar: 'bold italic strikethrough forecolor backcolor | link | alignleft aligncenter alignright alignjustify  | numlist bullist | removeformat | mybutton',
    setup: function (editor) {
        editor.addButton('mybutton', {
            icon: "mce-ico mce-i-preview",
            onclick: function () {
                $(editor.editorContainer).find(".mce-container.mce-menubar.mce-toolbar.mce-first").toggle();
            }
        })
    },
    init_instance_callback: function (editor) {
        $(editor.editorContainer).find(".mce-container.mce-menubar.mce-toolbar.mce-first").toggle();
    }
});

它对我有用！