Как добавить кнопку на TinyMCE для отображения видимости панели инструментов?

Question

У меня есть 2 панели инструментов в моем редакторе tinyMCE (2 строки), и я хочу добавить кнопку на первой панели инструментов, которая отображает/скрывает вторую панель инструментов.

В основном кнопка расширения/свернуть. По умолчанию вторая панель инструментов невидима, только когда кнопка нажата, она отображается. Затем кнопка должна изменить значок (что-то вроде chevron-down to chevron-up), и при повторном нажатии должна скрывать вторую панель инструментов.

Это может быть статическая кнопка, которая говорит что-то вроде дополнительных опций, которые показывают/скрывают вторую панель инструментов.

Я не нашел плагин tinymce, который достигает этого. Кто-нибудь знает, как реализовать это или плагин, который уже делает это (или близко к нему)?

Answer 1

У TinyMCE нет API-интерфейсов для этого, но вы можете сделать это на основе классов, которые TinyMCE размещает на DIV, которые содержат каждую панель инструментов.

Если посмотреть на DIVs что TinyMCE использует для отображения панели инструментов, вы увидите что-то вроде этого:

<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> 

(я опуская целую кучу HTML в каждой из этих DIVs)

Последний ряд панелей инструментов будет иметь классы mce-toolbar и mce-last. Используя jQuery, вы можете легко показать/скрыть этот DIV с помощью метода toggle(). Просто сделайте кнопку на панели инструментов и добавить, что в первом ряду кнопок на панели инструментов:

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

... и ...

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