Remove menu and status bars in TinyMCE 4

Question

I am trying to remove the menu and status bars from TinyMCE 4 because I want to setup a very basic editor. Is this possible?

The documentation for TinyMCE 3 does not seem to be relevant and I cannot find anything for version 4.

Barbed

well css you can do that easily ! – Poland

@ShivanshuSrivastava: you're kidding, right? :) – Callable

Answer 1

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'

Barbed

Small typo: menuBar: 'file edit' should be menubar: 'file edit' – Ligetti

excellent! any idea how customize a specific textarea rather than all of'em? – Ultrared

"any idea how customize a specific textarea rather than all of'em?" tinymce.init({ mode: "exact", elements: "IdOftextAreaEtc", where IdOftextAreaEtc is the id of the control to use for tinyMCE – Edo

@DavidBridge, this syntax is for version 3.x. From 4.x, you can use the tinymce.init({ selector: "textarea#IdOfTextarea"}) (much like css syntax). – Midwinter

Answer 2

If you want to remove entire Menu bar from top

tinymce.init({
    menubar: false,

});

But if you want Custom menubar with some submenu

tinymce.init({
    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'}
    }
});

see TinyMCE for more help.

Garwin

Answer 3

So, It is clearly metioned in their docs that to make the values to false.

    tinymce.init({
    menubar: false,
    branding: false,
    statusbar: false,
   })

In the latest update to v5 You can display menubar as such

    tinymce.init({
     menu: {
      edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall searchreplace' },
      insert: { title: 'Insert', items: 'image link charmap pagebreak' },
      format: { title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat' },
      table: { title: 'Table', items: 'inserttable tableprops deletetable | cell row column' }
    },
    menubar: 'edit insert format table',
});

see https://www.tiny.cloud/docs/ for more details

Harmaning

I don't think it was clearly mentioned in their docs at the time the question was asked – Barbed

Answer 4

If you want a completely clean text box, you could disable all the bars, including de "toolbar":

tinymce.init({
            selector:'textarea',
            branding: false,
            menubar:false,
            statusbar: false,
            toolbar: false,
        });

Ceremonious

Answer 5

In the community edition I think you are not allowed to hide the statusbar (Powered by Tiny) branding part.

https://www.tiny.cloud/docs-4x/configure/editor-appearance/#branding

Fergus