Question

TinyMCE allows developers to create sidebars and add custom UI widgets inside a constrained and easily accessible area of the editor. The sidebar is designed to allow administrators and plugin developers to provide additional tools that can be accessed by TinyMCE users.

Editor sidebar API

The sidebar API allows developers to add sidebars on editor instances in a similar way as adding buttons or menu items. Developers can either add sidebars directly in the tinymce.init using the setup callback or inside your plugin.

This is the syntax for the addSidebar function: editor.ui.registry.addSidebar(name:String, spec:Object)

Specification object

tooltip

The tooltip specifies a tooltip to be displayed when hovering over the sidebar toggle button.

Type: String

icon

The icon specifies an icon for the sidebar toggle button. The icon should be the name of an icon provided by the TinyMCE skin.

Type: String

onSetup

The onSetup specifies a function to be called when the panel is first created. It passes in an API object and should return a callback that takes an API. The default is (api) => (api) => {}.

onSetup is a complex property. It requires a function that takes the sidebar’s API and should return a callback that takes the sidebar’s API and returns nothing. This occurs because onSetup runs whenever the sidebar is rendered, and the returned callback is executed when the sidebar is destroyed. Therefore the returned function is essentially an onTeardown handler, and can be used to unbind events and callbacks.

Type: function

onShow

The onShow specifies a function to be called when the panel displayed. It passes in an API object.

Type: function

onHide

The onHide specifies a function to be called when the panel is hidden. It passes in an API object.

Type: function

API Object

element():HTMLElement

The element():HTMLElement function returns the root element of the sidebar panel.

Example inside the tinymce.init

tinymce.init({
  ...
  setup: function (editor) {
    editor.ui.registry.addSidebar('mysidebar', {
      tooltip: 'My sidebar',
      icon: 'settings',
      onSetup: function (api) {
        console.log('Render panel', api.element());
      },
      onShow: function (api) {
        console.log('Show panel', api.element());
        api.element().innerHTML = 'Hello world!';
      },
      onHide: function (api) {
        console.log('Hide panel', api.element());
      }
    });
  }
});

Example inside a TinyMCE plugin

tinymce.PluginManager.add('myplugin', function (editor) {
  editor.ui.registry.addSidebar('mysidebar', {
    tooltip: 'My sidebar',
    icon: 'settings',
    onSetup: function (api) {
      console.log('Render panel', api.element());
    },
    onShow: function (api) {
      console.log('Show panel', api.element());
      api.element().innerHTML = 'Hello world!';
    },
    onHide: function (api) {
      console.log('Hide panel', api.element());
    }
  });
});