Tinymce Customize "File" Menubar

TinyMCE customize file menubar

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:

selector: "textarea",
menubar: "edit format"

Disable menubar:

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.

TinyMCE 4 add drop down menu to menu bar

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

<form method="post" action="dump.php">
<textarea name="content"></textarea>

Remove menu and status bars in TinyMCE 4

I looked at the source and it was fairly obvious:

statusbar: false,

This removes both.

You can also customise what parts of the default menu bar are visible by specifying a string of enabled menus - e.g. menubar: 'file edit'

You can define your own menus like this:

menu : {    
test: {title: 'Test Menu', items: 'newdocument'}
menubar: 'test'

how to change the name of tinymce menubar items

TinyMCE is already localized into a large number of languages including Spanish so you don't need to do this manually.

  • https://www.tiny.cloud/docs/configure/localization/#language

  • https://www.tiny.cloud/docs/configure/localization/#usingthecommunitylanguagepacks

Assuming you have the correct language pack downloaded and deployed into the correct place you simply need to tell TinyMCE to use that language pack:

selector: 'textarea', // change this value according to your HTML
language: 'es'

Tiny MCE - Remove 'FIle' option from Menu

You can configure this with the menubar option.

selector: 'textarea', // change this value according to your HTML
menubar: 'edit insert view format table tools' // skip file

Customize tinymce 4.0.5 styleselect toolbar menu

Finally, adding the following code did the trick:

title: "Headers",
items: [
{title: "Header 1",format: "h1"},
{title: "Header 2",format: "h2"},
{title: "Header 3",format: "h3"},
{title: "Header 4",format: "h4"},
{title: "Header 5",format: "h5"},
{title: "Header 6",format: "h6"}
title: "Inline",items: [{title: "Bold",icon: "bold",format: "bold"}, {title: "Italic",icon: "italic",format: "italic"},
{title: "_Underline",icon: "underline",format: "underline"}, {title: "Strikethrough",icon: "strikethrough",format: "strikethrough"}, {title: "Superscript",icon: "superscript",format: "superscript"}, {title: "Subscript",icon: "subscript",format: "subscript"}, {title: "Code",icon: "code",format: "code"}]},
{title: "_Blocks",items: [{title: "Paragraph",format: "p"}, {title: "Blockquote",format: "blockquote"}, {title: "Div",format: "div"}, {title: "Pre",format: "pre"}]},
{title: "_Alignment",items: [{title: "Left",icon: "alignleft",format: "alignleft"}, {title: "Center",icon: "aligncenter",format: "aligncenter"}, {title: "Right",icon: "alignright",format: "alignright"}, {title: "Justify",icon: "alignjustify",format: "alignjustify"}]},
title: "Font Family",
items: [
{title: 'Arial', inline: 'span', styles: { 'font-family':'arial'}},
{title: 'Book Antiqua', inline: 'span', styles: { 'font-family':'book antiqua'}},
{title: 'Comic Sans MS', inline: 'span', styles: { 'font-family':'comic sans ms,sans-serif'}},
{title: 'Courier New', inline: 'span', styles: { 'font-family':'courier new,courier'}},
{title: 'Georgia', inline: 'span', styles: { 'font-family':'georgia,palatino'}},
{title: 'Helvetica', inline: 'span', styles: { 'font-family':'helvetica'}},
{title: 'Impact', inline: 'span', styles: { 'font-family':'impact,chicago'}},
{title: 'Open Sans', inline: 'span', styles: { 'font-family':'Open Sans'}},
{title: 'Symbol', inline: 'span', styles: { 'font-family':'symbol'}},
{title: 'Tahoma', inline: 'span', styles: { 'font-family':'tahoma'}},
{title: 'Terminal', inline: 'span', styles: { 'font-family':'terminal,monaco'}},
{title: 'Times New Roman', inline: 'span', styles: { 'font-family':'times new roman,times'}},
{title: 'Verdana', inline: 'span', styles: { 'font-family':'Verdana'}}
{title: "Font Size", items: [
{title: '8pt', inline:'span', styles: { fontSize: '12px', 'font-size': '8px' } },
{title: '10pt', inline:'span', styles: { fontSize: '12px', 'font-size': '10px' } },
{title: '12pt', inline:'span', styles: { fontSize: '12px', 'font-size': '12px' } },
{title: '14pt', inline:'span', styles: { fontSize: '12px', 'font-size': '14px' } },
{title: '16pt', inline:'span', styles: { fontSize: '12px', 'font-size': '16px' } }

Related Topics

Leave a reply