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. enter image description here

score 32 · Accepted Answer · edited Dec 20 '16 at 17:41

32

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.

edited Dec 20 '16 at 17:41

chiliNUT

18,989
14
66
106

answered Apr 20 '13 at 11:37

toxalot

11,260
6
35
58

Thanks. The first thing I wanted to do was remove that bar. – Jason Parker May 24 '13 at 19:02
3

Looks like the tinyMCE folks put together a fiddle site, makes it a lot easier to experiment: http://fiddle.tinymce.com/ – alxndr Jun 24 '13 at 16:34
Many of the Example fiddles are currently broken as they're based on the 3.x API while the site is set to use edge for them... http://www.tinymce.com/forum/viewtopic.php?pid=107896#p107896 – alxndr Jun 24 '13 at 16:47
@alxndr: yes, but it's not a big deal, you set the "TinyMCE Version" option on the left side to one of the 3.x versions, and you're done, you can test the 3.x version fiddle. If it interests you for some reason. – Sk8erPeter Jan 04 '14 at 00:56

score 5 · Answer 2 · answered Jun 24 '13 at 17:58

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(.

Here are the relevant documentation pages (you could paste them in your answer): http://www.tinymce.com/wiki.php/Configuration:menubar, http://www.tinymce.com/wiki.php/Configuration:menu. — Sk8erPeter, Jan 04 '14 at 01:07

score 1 · Answer 3 · edited Jan 07 '14 at 12:32

1

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>>>",
});

edited Jan 07 '14 at 12:32

Sk8erPeter

6,899
9
48
67

answered Nov 08 '13 at 12:41

prabhudev mathapati

31
2

This example is WRONG if we talk about the 4.x API, [`theme_advanced_buttons<1-n>` option](http://www.tinymce.com/wiki.php/Configuration3x:theme_advanced_buttons_1_n) is only valid for 3.x versions. The OP asked how to remove/customize the menu bar, and you don't answer this question. I think you should delete this answer. Thanks. – Sk8erPeter Jan 04 '14 at 01:04
Dear Sk8erPeter, I am working on Tinymce 4.0.6 version (in the begining), it supported theme_advanced_buttons<1-n> option. Above Tinymce 4.0.6, toolbar<1-n> is being used and the same is updated in the product I am working on (now using Tinymce 4.0.12). I had updated the my answer above. – prabhudev mathapati Jan 07 '14 at 09:51
Thanks for editing your answer, I removed the downvote. :) By the way, [I fixed some sentences/typos](http://stackoverflow.com/review/suggested-edits/3747253), I think this way the answer is correct. – Sk8erPeter Jan 07 '14 at 12:35
The `menubar` and `toolbar` are not the same thing. – toxalot Feb 22 '14 at 23:26

TinyMCE customize "file" menubar

3 Answers3

Linked