TinyMCE customize “file” menubar

Question

Is there a way to customize (add and remove options, e.t.c..) the menubar in TinyMCE 4.0? I am unable to find any documentation on that specific part of the editor. The image below demonstrates the part I'm talking about.

Answer 1

Version 4 is a major rewrite and the docs were out of sync for a while.

Through experimentation, I discovered that it is possible to enable/disable the drop-downs individually or disable the whole menubar.

Enable specific drop downs only:

tinymce.init({
    selector: "textarea",
    menubar: "edit format"
});

Disable menubar:

tinymce.init({
    selector: "textarea",
    menubar: false
});

The menubar configuration docs have now been added to TinyMCE site.

Also, if you want to completely customize the whole menu, check out the menu configuration docs.

Answer 2

I ended up customizing both the menu bar and the tool bar by tweaking the menu and toolbar properties in the settings object passed to tinymce.init():

// ...
  menu : {
    edit: { title: 'Edit', items: 'undo redo  | cut copy paste selectall | searchreplace' },
    insert: { title: 'Insert', items: 'link charmap' },
    format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript | removeformat' },
    table: { title: 'Table', items: 'inserttable tableprops deletetable | cell row column' }
  },
  toolbar: 'undo redo | bold italic underline | link hr | alignleft aligncenter alignright | blockquote bullist numlist outdent indent | code',
// ...

I found the terms for each menu/button by digging around in the source code looking for .addMenuItem( and .addButton(.

Answer 3

In TinyMCE 4.x version, "code" plugin is used to show/edit HTML code of the editor content.

To control the toolbar, up to 4.0.6 version, theme_advanced_button<1-n> option was used, but above 4.0.6 version, toolbar or toolbar<1-N> option is used.

By adding "code" plugin to the toolbar options, "Tools" menu will be added with the "Source Code" sub-menu (as button "<>" (icon)).

tinyMCE.init({
    // ......
    // ......
    plugins: "searchreplace code",

    toolbar1: "separator forecolor backcolor code",
    toolbar2: "<<<some buttons list>>>",
    toolbar3: "<<<some buttons list>>>",
    toolbar4: "<<<some buttons list>>>",
});