Search code examples
javascriptjquerytinymcetinymce-4

TinyMCE 4 add drop down menu to menu bar


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

new item

The closest solution I found was this:

// 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 it only adds an item to the already existing "Tools" menu.


Solution

  • You can try to specify both 'menu' and 'menubar' option when you call tinymce.init() to add a new menubar item on the modern theme.

    I tried it and it works.

    You can check the live demo on 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>