TinyMCE 5技术问询：如何移除菜单中fontname与fontsize选项且不禁用功能

Got it, I totally get what you're trying to do—you want to hide the fontname and fontsize dropdowns from the TinyMCE 5 menu bar, but keep the ability to use those features via toolbar buttons, keyboard shortcuts, or API calls. The official docs focus more on formatting options, so it's easy to miss this specific tweak. Here are two solid ways to pull this off:

1. Define a Custom Menu Structure (Cleanest Approach) #

The most straightforward method is to explicitly define the entire menu bar configuration, omitting the fontselect (fontname dropdown) and fontsizeselect (fontsize dropdown) items from the Format menu. This gives you full control over what appears in the menu:

tinymce.init({
  selector: 'textarea',
  // Optional: Keep toolbar buttons for font controls if needed
  toolbar: 'fontselect fontsizeselect bold italic',
  menu: {
    file: { title: 'File', items: 'newdocument restoredraft | preview | print' },
    edit: { title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall | searchreplace' },
    view: { title: 'View', items: 'visualaid | preview | fullscreen' },
    insert: { title: 'Insert', items: 'image link media template codesample inserttable | charmap emoticons hr | pagebreak nonbreaking anchor toc | insertdatetime' },
    format: { 
      title: 'Format', 
      items: 'bold italic underline strikethrough superscript subscript codeformat | formats blockformats | removeformat' 
      // Notice: No fontselect or fontsizeselect here
    },
    tools: { title: 'Tools', items: 'spellchecker spellcheckerlanguage | a11ycheck code wordcount' },
    table: { title: 'Table', items: 'inserttable | cell row column | delete table' },
    help: { title: 'Help', items: 'help' }
  }
});

How this works: #

By redefining the menu object, you’re telling TinyMCE exactly which menu items to load. The Format menu now excludes the font dropdowns, but the underlying functionality stays intact—you can still use the toolbar buttons, or run commands like editor.execCommand('FontName', false, 'Georgia') via your code.

2. Dynamically Modify the Menu (No Full Rewrite Needed) #

If you don’t want to rewrite the entire menu structure, you can use the setup function to tweak the existing menu after the editor initializes. This is great if you want to keep most of the default menu items and just remove the two dropdowns:

tinymce.init({
  selector: 'textarea',
  setup: (editor) => {
    editor.on('init', () => {
      // Fetch the existing Format menu configuration
      const formatMenu = editor.ui.registry.getMenu('format');
      
      if (formatMenu) {
        // Filter out the fontselect and fontsizeselect items
        formatMenu.items = formatMenu.items.filter(itemId => 
          itemId !== 'fontselect' && itemId !== 'fontsizeselect'
        );
        
        // Update the menu by re-registering it
        editor.ui.registry.removeMenu('format');
        editor.ui.registry.addMenu('format', formatMenu);
      }
    });
  }
});

How this works: #

After the editor finishes initializing, we grab the Format menu’s settings, filter out the unwanted items, then re-register the modified menu. This preserves all default menu items except the font dropdowns, and again, doesn’t disable the font/字号 functionality.

Both methods will achieve exactly what you need—hiding the menu options while keeping the features usable elsewhere.

内容的提问来源于stack exchange，提问作者theBell