Toolbar Customization

ReadyEditor's toolbar is built from plugins. Each plugin registers its buttons into a toolbar group. You have several ways to control what appears.

Presets

Set data-toolbar-preset on the loader tag:

Suppress specific plugins

Use data-disable-plugins to remove plugins from whatever set is loaded:

<script
  src="https://cdn.readyeditor.io/releases/<version>/js/readyeditor.loader.min.js"
  data-api-key="rk_..."
  data-selector=".my-editor"
  data-load-css="1"
  data-plugins="auto"
  data-disable-plugins="icons,readability,bootstrap,attrs,tools_emoji"
  data-require-sri="1"
></script>

Load a specific subset

<script
  ...
  data-plugins="formatting_basic,formatting_blocks,lists,link,view_source"
></script>

Filter by toolbar group

Allow only certain groups:

data-toolbar-groups="Formatting,Insert"

Hide certain groups:

data-toolbar-hide-groups="Tools,View"

Force specific groups into the "More" dropdown:

data-toolbar-overflow-groups="Tools,View"

This pins the named groups into the overflow menu unconditionally — regardless of the available toolbar width. Other groups may still flow into overflow automatically when the toolbar is too narrow. To force nothing into overflow (show everything), simply omit the attribute (or pass an empty string).

Example — always keep "Tools" and "View" in the More menu:

<script
  src="https://cdn.readyeditor.io/releases/<version>/js/readyeditor.loader.min.js"
  data-api-key="rk_..."
  data-selector=".my-editor"
  data-load-css="1"
  data-plugins="auto"
  data-toolbar-overflow-groups="Tools,View"
></script>

Or via the JS API:

window.ReadyEditorLoader.init({
  apiKey: 'YOUR_API_KEY',
  selector: '.my-editor',
  ui: { overflowGroups: 'Tools,View' },
});

Disable overflow entirely

Set data-toolbar-overflow="off" to turn the overflow mechanism off altogether. The toolbar will wrap to multiple rows on narrow widths instead of hiding items behind the "More" button.

<script
  src="https://cdn.readyeditor.io/releases/<version>/js/readyeditor.loader.min.js"
  data-api-key="rk_..."
  data-selector=".my-editor"
  data-load-css="1"
  data-plugins="auto"
  data-toolbar-overflow="off"
></script>

Or via the JS API:

window.ReadyEditorLoader.init({
  apiKey: 'YOUR_API_KEY',
  selector: '.my-editor',
  ui: { overflow: false },
});

Tip: data-toolbar-overflow="off" is the simplest way to ensure nothing ever ends up in the "More" menu. The toolbar will expand to as many rows as needed to fit all groups.

Available groups: Formatting, Insert, Tools, View, Other

Server-side enforcement

data-disable-plugins is a client-side convenience. A user who inspects the loader tag can remove the attribute. For stronger enforcement, disable plugins at the project level in the dashboard — the init endpoint will exclude them from features regardless of what the loader requests.

Registering plugin metadata (custom plugins)

When writing a custom plugin, you can declare its toolbar group and sort order:

ReadyEditorUI.registerPlugin(
  { name: 'myPlugin', group: 'Insert', order: 50 },
  function myPlugin(ctx) {
    ctx.utils.addButton(ctx.toolbar, 'My Button', 'Tooltip', function() {
      ctx.instance.insertHTML('<span>inserted</span>');
    });
  }
);

If group is omitted, the UI core infers a group from the plugin name. If order is omitted it defaults to 0.