TinyMCE 4 add drop-down menu to menu bar

Question

I need to add another drop-down menu next to the Tools item in TinyMCE 4:

The closest solution I found was as follows:

// Adds a custom menu item to the editor that inserts contents when clicked // The context option allows you to add the menu item to an existing default menu tinymce.init({ ... setup: function(ed) { ed.addMenuItem('example', { text: 'My menu item', context: 'tools', onclick: function() { ed.insertContent('Hello world!!'); } }); } }); 

But he adds an item to the existing Tools menu.

Answer 1

You can specify the “menu” and “menu” options when you call tinymce.init () to add a new menu item to a modern theme.

I tried and it works.

You can check out the live demo at http://fiddle.tinymce.com/39eaab/1 with TinyMCE 4.1.7.

 <script type="text/javascript"> tinymce.init({ selector: "textarea", menu : { file : {title : 'File' , items : 'newdocument'}, edit : {title : 'Edit' , items : 'undo redo | cut copy paste pastetext | selectall'}, insert : {title : 'Insert', items : 'link media | template hr'}, view : {title : 'View' , items : 'visualaid'}, format : {title : 'Format', items : 'bold italic underline strikethrough superscript subscript | formats | removeformat'}, table : {title : 'Table' , items : 'inserttable tableprops deletetable | cell row column'}, tools : {title : 'Tools' , items : 'spellchecker code'}, newmenu: {title : 'New Menu', items : 'newmenuitem'} }, menubar: 'file edit newmenu', setup: function(editor) { editor.addMenuItem('newmenuitem', { text: 'New Menu Item', context: 'newmenu', onclick: function () { alert('yey!'); } }); } }); </script> <form method="post" action="dump.php"> <textarea name="content"></textarea> </form> 

Answer 2

Not sure what you need, but what if you try this:

 <script type="text/javascript"> tinymce.init({ selector: "textarea", toolbar: "mybutton", setup: function(editor) { editor.addButton('mybutton', { type: 'menubutton', text: 'My button', icon: false, menu: [ {text: 'Menu item 1', onclick: function() {editor.insertContent('Menu item 1');}}, {text: 'Menu item 2', onclick: function() {editor.insertContent('Menu item 2');}} ] }); } }); </script> 

You can view the result of the code here.