CODEWITHSUNDEEP
javascriptwordpressbuttonmenutinymce
ojrask
ojrask

Reputation: 2828

Remove submenu item in TinyMCE 4

I'm trying to remove a subitem from a TinyMCE dropdown toolbar button in WordPress.

The button is a plugin button (TinyMCE Table Button), and it inserts an item that allows the user to do CSS styling on the tables.

TinyMCE plugin generated dropdown

(Taulukon ominaisuudet == Table properties)

The toolbar button is created with

editor.addButton("table", {
    type: "menubutton",
    title: "Table",
    menu: menuItems
});

The menu item is created with

editor.addMenuItem('tableprops', {
    text: 'Table properties',
    context: 'table',
    onPostRender: postRender,
    onclick: dialogs.tableProps
});

editor is the TinyMCE plugins constructor param:

define("tinymce/tableplugin/Plugin", [
    "tinymce/tableplugin/TableGrid",
    ...
    "tinymce/PluginManager"
], function(TableGrid, Quirks, CellSelection, Dialogs, Tools, TreeWalker, Env, PluginManager) {
    var each = Tools.each;

    function Plugin(editor) {
        var clipboardRows, self = this, dialogs = new Dialogs(editor);

        ...

The editor has a function for addMenuItem, but I can't find anything similar to removeMenuItem. I also tried to find the menu item inside the editor so I could remove it by hand, but the system is a bit shady as to where the buttons and menus are.

Is there a logical way of removing menu items in TinyMCE or will I have to remove it directly from the DOM after the editor has been generated?

Upvotes: 1

Views: 3628

Answers (2)

Bojan Mitic
Bojan Mitic

Reputation: 482

Here is one approach that worked for me

const buttons = editor.ui.registry.getAll().menuItems

    for(const button in buttons) {
        if(button === 'tableprops' || button === 'tablecellprops' || button === 'tablerowprops')
        delete buttons[button]
    }

This could be placed in init_instance_callback

I was using TinyMCE for React here, not sure if it's the same init function name for others.

Upvotes: 0

Benny Lin
Benny Lin

Reputation: 536

UPDATE: Just realize, you are using a different table plugin. I guess an easy way is to inspect the element/source and get the element ID of that menu item and use CSS to hide it.

<style>
#mceu_38 {display:none !important;}
</style>

Below is my original response, it is meant for editing the default menu bars

You can customize the menu bar in the init function:

tinymce.init({
    selector: "textarea",
    menu : { // this is the complete default configuration
        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 deletetable | cell row column'},
        tools  : {title : 'Tools' , items : 'spellchecker code'}
    },    
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});

Just remove the items you don't want in each menu property.

Here's an example with Table Properties removed: http://fiddle.tinymce.com/43eaab

Here's the documentation: http://www.tinymce.com/wiki.php/Configuration:menu

gl.

Upvotes: 3

Related Questions