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:

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.

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">
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>

Remove menu and status bars in TinyMCE 4

I looked at the source and it was fairly obvious:

tinyMCE.init({
    menubar:false,
    statusbar: false,
        //etc
})

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:

tinymce.init({
  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.

tinymce.init({
  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:

    ,style_formats:[
         {
           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