i have 2 toolbars on tinymce editor (2 rows) , want add button on first toolbar shows/hides 2nd toolbar.
basically expand / collapse button. default 2nd toolbar invisible when button clicked shown. button should change icon (something chevron-down chevron-up) , when clicked again should hide 2nd toolbar.
it static button says advanced options show/hide 2nd toolbar.
i didn't find tinymce plugin achieves this. know how implement or plugin (or close it) ?
tinymce not have apis can based on classes tinymce places on divs contain each toolbar.
if @ divs tinymce uses render toolbars see this:
<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>
(i omitting whole bunch of html in each of these divs)
the last row of toolbars have classes mce-toolbar
, mce-last
. using jquery can show/hide div toggle()
method. make toolbar button , add first row of toolbar buttons:
editor.addbutton('hidetoolbar2', { text: 'hide toolbar 2', onclick: function () { $('div.mce-toolbar.mce-last').toggle(); } });
...and...
tinymce.init({ selector: 'textarea', ... toolbar: [ "hidetoolbar2 | insertfile...", "removeformat | fontsizeselect..." ], ... }