Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Abstract illustration of a menu button with two menu items.

Add menu items dynamically to menu buttons in TinyMCE

Ben Long

May 6th, 2020

Written by

Ben Long
Ben Long

Category

How-tos & Tutorials

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
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. 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

  • Text "Insert Template" with corresponding icon above.
    How-tos & Tutorials

    Making the most of templates in TinyMCE

    by Marty Friedel in How-tos & Tutorials
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor