TinyMCE5 disable certain toolbar buttons and menu options

35 views Asked by At

I am trying to disable some toolbar and menu options of tinyMce but I could not find a proper way to do it, base on what i found I came up with something like this:

   const buttons = this.editor.ui.registry.getAll().menuItems;
    for (let id in buttons) {
        if (buttons.hasOwnProperty(id)) {
            let button = buttons[id];
            button.disabled = !enabled;
        }
    }

Based on the code of tinymce below disabled is a valid property on the button but it does not do anything when i set it to true, any ideas?

interface BaseToolbarButtonSpec<I extends BaseToolbarButtonInstanceApi> {
    disabled?: boolean;
    tooltip?: string;
    icon?: string;
    text?: string;
    onSetup?: (api: I) => (api: I) => void;
}
2

There are 2 answers

0
DJSpud On

You need to use the Button API, almost every API in TinyMCE is unstable so you will have to figure out the exact methods around disabled or enabled depending on your specific version.

TinyMCE 5 is not supported so I will answer for 6: Reference: https://www.tiny.cloud/docs/tinymce/6/custom-basic-toolbar-button/#api

Something like:

const buttons = this.editor.ui.registry.getAll().menuItems;
for (let id in buttons) {
    if (buttons.hasOwnProperty(id)) {
        let button = buttons[id];
        button.setEnabled(!enabled);
    }
}

Do not set properties directly.

0
RobinJoe On

You can also enable and disable specific plugins with the menubar and toolbar options in the TinyMCE.init, or set them both to "false" to completely disable all the toolbar buttons and menu options:

tinymce.init({
    selector: "textarea",
    plugins: [ "plugin-names" ],
    menubar: "false",
    toolbar: "false",
});

You can modify specific menu items and toolbar items by:

  1. Taking plugin names out of the toolbar list
  2. Using the removed_menuitems option to take away the menubar items you don't need. The docs have a list of all the menubar item names for the Tiny config.

For example, this configuration takes out several menu items:

removed_menuitems: "newdocument, preview, visualblocks, image, bold, inserttable,  cell, row, column, advtablesort, tableprops, deletetable, help"

Here's how it works in the editor UI, before and after image:

[Two configurations of TinyMCE 5 compared, one with a default menu, and one with specific menu items removed1