TinyMCE 5: How can I remove fontname and fontsize from the menu?

Question

I don't want to disable the options for fontname and fontsize in tinyMCE 5. How can I achieve this? In the doc I only found options for editing the formats, but no simple option for removing these options from the dropdown.

Answer 1

If you want to change the default menu structure you need to define the entire structure of the menu yourself. For example you could do something like this:

menu : {
    file: {title: 'File', items: 'newdocument'},
    edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
    insert: {title: 'Insert', items: 'image link media template codesample'},
    format: {title: 'Format', items: 'bold italic underline'},
}

...which would completely remove some menus (e.g. Table) and reduce the options visible in other menus. The important thing to remember is that once you define the menu yourself you have to define every option you want on the menu.

The default menu structure is defined in the theme.js file. In TinyMCE 5.4.2 (the current release) it is defined as:

var defaultMenus = {
  file: {
    title: 'File',
    items: 'newdocument restoredraft | preview | print | deleteallconversations'
  },
  edit: {
    title: 'Edit',
    items: 'undo redo | cut copy paste pastetext | selectall | searchreplace'
  },
  view: {
    title: 'View',
    items: 'code | visualaid visualchars visualblocks | spellchecker | preview fullscreen | showcomments'
  },
  insert: {
    title: 'Insert',
    items: 'image link media addcomment pageembed template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime'
  },
  format: {
    title: 'Format',
    items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats fontformats fontsizes align | forecolor backcolor | removeformat'
  },
  tools: {
    title: 'Tools',
    items: 'spellchecker spellcheckerlanguage | a11ycheck code wordcount'
  },
  table: {
    title: 'Table',
    items: 'inserttable | cell row column | advtablesort | tableprops deletetable'
  },
  help: {
    title: 'Help',
    items: 'help'
  }
}; 

If you simply want to remove a few of the choices on a menu you can use the default as a starting point and just remove those items you don't want.