Add Custom TinyMCE Toolbar

Question

My aim is to create a tabbed menubar instead of the traditional menubar presented in the latest TinyMCE 4.7.6. I plan to do this by hiding the menubar, then create a toolbar above the normal toolbar. This new toolbar would consist of buttons with the menu names such as File, Edit, Insert, View etc. When one of these buttons is clicked, the normal toolbar buttons would be replaced with the toolbar buttons under the relevant menu item. [I hope I have been clear to this point.]

In case I haven't worded my description well enough, I want to create something like the Microsoft Word 2013 menu style.

Here's my problem. I am unable to create the toolbar that would host the menu buttons (File, Edit etc buttons). The TinyMCE docs say nothing about creating custom toolbars. All there is, is on creating toolbar buttons and adding them to an existing toolbar. Anyone with an idea how this can be done? Thanks.

Answer 1

This is quite some work you want to do, so first of all let me tell you a "ribbon" skin is already existing, check it here

Now if you really want to make your own, first you have to understand the difference between a menubar and a toolbar

On this image there is one menubar and two toolbars

Here is the documentation for the menubar API and for the toolbar this is here

But you should really give a try to the existing skin first.