tinymce.js

(function() {
  tinymce.PluginManager.add('app', function(editor, url) {
    editor.addButton('app', {
      title: 'App',
      icon: 'app icon-example',
      type: 'menubutton',
      menu: [
        {
          text: 'Shortcodes',
          menu: [
            {
              text: 'Accordion',
              onclick: function() {
                editor.windowManager.open({
                  title: 'Insert Accordion',
                  body: [
                    {
                      type: 'textbox',
                      name: 'accordionTitle',
                      label: 'Title',
                      value: 'My Accordion'
                    },
                    {
                      type: 'textbox',
                      name: 'accordionContent',
                      label: 'Content',
                      value: 'Lorem ipsum...',
                      multiline: true,
                      minWidth: 300,
                      minHeight: 100
                    }
                  ],
                  onsubmit: function(e) {
                    editor.insertContent(`[accordions]<br />[accordion title="{e.data.accordionTitle}"]<br />{e.data.accordionContent}<br />[/accordion]<br />[/accordions]`);
                  }
                });
              }
            },
            {
              text: 'Tabs',
              onclick: function() {
                editor.windowManager.open({
                  title: 'Insert Tabs',
                  body: [
                    {
                      type: 'textbox',
                      name: 'tabTitle',
                      label: 'Title',
                      value: 'My Tab'
                    },
                    {
                      type: 'textbox',
                      name: 'tabContent',
                      label: 'Content',
                      value: 'Lorem ipsum...',
                      multiline: true,
                      minWidth: 300,
                      minHeight: 100
                    }
                  ],
                  onsubmit: function(e) {
                    editor.insertContent(`[tabs]<br />[tab title="{e.data.tabTitle}"]<br />{e.data.tabContent}<br />[/tab]<br />[/tabs]`);
                  }
                });
              }
            },
            {
              text: 'Box',
              onclick: function() {
                editor.windowManager.open({
                  title: 'Insert Box',
                  body: [
                    {
                      type: 'textbox',
                      name: 'boxContent',
                      label: 'Content',
                      value: 'Lorem ipsum...',
                      multiline: true,
                      minWidth: 300,
                      minHeight: 100
                    }
                  ],
                  onsubmit: function(e) {
                    editor.insertContent(`[box]<br />{e.data.boxContent}<br />[/box]`);
                  }
                });
              }
            }
          ]
        }
      ]
    });
  });
})();