Start trial
PricingContact Us
Log InStart For Free

Add menu items dynamically to menu buttons in TinyMCE

May 6th, 2020

2 min read

Abstract illustration of a menu button with two menu items.

Written by

Ben Long

Category

How-to Use TinyMCE

Tagged

The TinyMCE editor is highly configurable, allowing developers to customize it for their unique needs.

In this article, we describe how to configure menu buttons on the toolbar so that menu items can be changed dynamically after initialization.

TinyMCE editor with a custom menu button containing one menu item.

The fetch function

The Tiny documentation provides several examples, demonstrating how you can configure different types of toolbar buttons.

Among the config options for the menu button and split button, there is a fetch function that takes a callback and passes it an array of menu items to be rendered in the button’s drop-down menu. This allows for asynchronous fetching of the menu items.

Example 1

In the following example, we define a custom button on the toolbar – mybutton – and register it within the setup callback. In the same callback, we define a global set of items.

The fetch function will be called whenever the menu button’s drop-down menu is opened, and will populate the menu with the items defined, in this case, Menu item 1.

<script type="text/javascript">
tinymce.init({
  selector: 'textarea',
  toolbar: 'mybutton additem',
  setup: function (editor) {
    var items = [
      {
        type: 'menuitem',
        text: 'Menu item 1',
        onAction: function () {
          editor.insertContent(' <em>You clicked menu item 1!</em>');
        }
      }
    ];

    editor.ui.registry.addMenuButton('mybutton', {
      text: 'My button',
      fetch: function (callback) {
        callback(items);
      }
    });
  }
});
</script>

This means that, if we can change the value of items after initialization, the menu items will change also.

For example, we could define another custom button on the toolbar – additem – and define it so that, on pressing it, a new menu item is added to the set of items.

editor.ui.registry.addButton("additem", {
  text: "Add item",
  onAction: function () {
    items.push({
      type: "menuitem",
      text: "Menu item 2",
      onAction: function () {
        editor.insertContent(" <em>You clicked menu item 2!</em>");
      },
    });
  },
});

Try a demo

See the code and try it out for yourself in this TinyMCE Fiddle.

Example 2

In the example above, we used a button to trigger a change to the set of items; however, you can use anything to trigger this change, or even add logic within the fetch callback function itself.

For instance, in this example, we’ve added logic so that the menu button is only populated with menu items if the user has added text to the editor.

<script type="text/javascript">
tinymce.init({
  selector: 'textarea',
  toolbar: 'mybutton',
  menubar: false,
  setup: function (editor) {
    editor.ui.registry.addSplitButton('mybutton', {
      text: 'My Button',
      onAction: function () {
        editor.insertContent('<p>You clicked the main button</p>');
      },
      onItemAction: function (api, value) {
        editor.insertContent(value);
      },
      fetch: function (callback) {
        if (editor.getContent() !== "") {
          var items = [
            {
              type: 'choiceitem',
              text: 'Menu item 1',
              value: ' <em>You clicked menu item 1!</em>'
            },
            {
              type: 'choiceitem',
              text: 'Menu item 2',
              value: ' <em>You clicked menu item 2!</em>'
            }
          ];
          callback(items);
        };
      }
    });
  }
});
</script>

Try a demo

See the code and try it out for yourself in this TinyMCE Fiddle.

What next?

While we’re on the topic of toolbar customization, check out these blog posts for more information on customizing TinyMCE to enhance the overall UX of your apps:

Not yet using TinyMCE on the cloud? When you’re on the cloud, you’ll always be up to date with the latest build and newest features. Get a free API Key and try it out (you’ll also get a free trial of our premium plugins!)

TinyMCE with naked skin, thin icons, and toolbar options grouped on the bottom.
TinyMCE
byBen Long

Computer scientist, storyteller, teacher, and an advocate of TinyMCE. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • How-to Use TinyMCEApr 28th, 2022

    How to set up TinyMCE from the cloud

Join 100,000+ developers who get regular tips & updates from the Tiny team.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

Tiny logo

Stay Connected

SOC2 compliance badge

Products

TinyMCEDriveMoxieManager
© Copyright 2024 Tiny Technologies Inc.

TinyMCE® and Tiny® are registered trademarks of Tiny Technologies, Inc.