Plugin Catalog

ReadyEditor uses a modular plugin system. Each plugin adds specific functionality to the editor toolbar. Plugins are enabled per-project based on your plan and loaded automatically by the loader.

Controlling which plugins load

<!-- Load all entitled plugins (default) -->
<script ... data-plugins="auto"></script>

<!-- Load a specific subset -->
<script ... data-plugins="formatting_basic,lists,link"></script>

<!-- Load all entitled but suppress some -->
<script ... data-plugins="auto" data-disable-plugins="bootstrap,icons"></script>

<!-- Load nothing -->
<script ... data-plugins="none"></script>

Available plugins

Formatting

Structure

Media & Links

Editing & Tools

View & Output

Productivity & Reliability

Framework

Plan presets

Custom plugin development

Plugins are JavaScript modules that register with ReadyEditorUI.registerPlugin().

Minimal plugin

(function(window) {
  'use strict';

  if (!window.ReadyEditorUI) {
    console.error('[ReadyEditorUI/myPlugin] ReadyEditorUI not found.');
    return;
  }

  ReadyEditorUI.registerPlugin('myPlugin', function myPlugin(ctx) {
    var instance = ctx.instance;
    var toolbar  = ctx.toolbar;
    var utils    = ctx.utils;

    if (!instance || !toolbar) return;

    utils.addButton(toolbar, '<i class="ri-star-line"></i>', 'Tooltip text', function() {
      instance.insertHTML('<span class="highlight">highlighted</span>');
    });
  });
})(window);

Plugin with a dialog

ReadyEditorUI.registerPlugin('myPlugin', function(ctx) {
  var instance      = ctx.instance;
  var toolbar       = ctx.toolbar;
  var utils         = ctx.utils;
  var ModalManager  = ctx.ModalManager;

  utils.addButton(toolbar, '<i class="ri-link"></i>', 'Open dialog', function() {
    ModalManager.openFormModal({
      title: 'My Dialog',
      fields: [
        { name: 'url',  label: 'URL',       type: 'text', placeholder: 'https://…' },
        { name: 'text', label: 'Link text', type: 'text' },
      ],
      confirmText: 'Insert',
      onSubmit: function(values) {
        instance.insertHTML(
          '<a href="' + utils.escapeHtml(values.url) + '">' +
          utils.escapeHtml(values.text || values.url) +
          '</a>'
        );
      },
    });
  });
});

Listening for the save event

If you use the save plugin, listen for the readyeditor:save event on the editor element to handle saving in your application:

document.querySelector('[data-readyeditor]').addEventListener('readyeditor:save', function(e) {
  var html = e.detail.content;
  // POST html to your API
  fetch('/api/posts/123', {
    method: 'PATCH',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ body: html }),
  });
  e.preventDefault(); // prevent form submit (if inside a form)
});

Plugin context object

Inserting content

Prefer instance.insertHTML(html) and instance.insertText(text) over execCommand('insertHTML') directly. These helpers guarantee the caret is inside the editor and include a Range fallback.

Plugin registration with metadata

ReadyEditorUI.registerPlugin(
  { name: 'myPlugin', group: 'Insert', order: 50, deps: [] },
  function myPlugin(ctx) { /* … */ }
);

Best practices

• Always verify instance and toolbar exist before doing anything.
• Always escape user input with utils.escapeHtml() before inserting into HTML.
• Save and restore the selection when opening a modal (the selection is lost when focus moves to a modal input).
• Wrap your plugin body in a try/catch and log errors with a [ReadyEditorUI/pluginName] prefix.

Canonical plugin catalog (generated)

This section is generated from config/readyeditor_plugins.php.

Analytics

• Plugin Name: readability — Readability (legacy: legacy/public/js/plugins/plugin.readability.js)
• Plugin Name: wordcount — Word count (legacy: legacy/public/js/plugins/plugin.wordcount.js)

Clipboard

• Plugin Name: autolink — Auto link (legacy: legacy/public/js/plugins/plugin.autolink.js)
• Plugin Name: clipboard — Clipboard (legacy: legacy/public/js/plugins/plugin.clipboard.js)

Formatting

• Plugin Name: align — Text alignment (legacy: legacy/public/js/plugins/plugin.align.js)
• Plugin Name: colors — Colors (legacy: legacy/public/js/plugins/plugin.colors.js)
• Plugin Name: directionality — Text direction (LTR/RTL) (legacy: legacy/public/js/plugins/plugin.directionality.js)
• Plugin Name: formatting_basic — Basic formatting (legacy: legacy/public/js/plugins/plugin.formatting.basic.js)
• Plugin Name: formatting_blocks — Block formatting (legacy: legacy/public/js/plugins/plugin.formatting.blocks.js)
• Plugin Name: formatting_misc — Additional formatting (legacy: legacy/public/js/plugins/plugin.formatting.misc.js)
• Plugin Name: hr — Horizontal rule (legacy: legacy/public/js/plugins/plugin.hr.js)
• Plugin Name: lineheight — Line height (legacy: legacy/public/js/plugins/plugin.lineheight.js)

Framework

• Plugin Name: bootstrap — Bootstrap (legacy: legacy/public/js/plugins/plugin.bootstrap.js)

Media

• Plugin Name: anchor — Anchor (legacy: legacy/public/js/plugins/plugin.anchor.js)
• Plugin Name: embed_video — Video embed (legacy: legacy/public/js/plugins/plugin.embed.video.js)
• Plugin Name: image_tools — Image tools (legacy: legacy/public/js/plugins/plugin.image.tools.js)
• Plugin Name: link — Links (legacy: legacy/public/js/plugins/plugin.link.js)
• Plugin Name: media — Media (legacy: legacy/public/js/plugins/plugin.media.js)
• Plugin Name: media_audio — Audio (legacy: legacy/public/js/plugins/plugin.media.audio.js)

Structure

• Plugin Name: lists — Lists (legacy: legacy/public/js/plugins/plugin.lists.js)
• Plugin Name: table — Tables (legacy: legacy/public/js/plugins/plugin.table.js)

Tools

• Plugin Name: attrs — Attributes (legacy: legacy/public/js/plugins/plugin.attrs.js)
• Plugin Name: autosave — Autosave (legacy: legacy/public/js/plugins/plugin.autosave.js)
• Plugin Name: charmap — Special characters (legacy: legacy/public/js/plugins/plugin.charmap.js)
• Plugin Name: findreplace — Find & replace (legacy: legacy/public/js/plugins/plugin.findreplace.js)
• Plugin Name: icons — Icons (legacy: legacy/public/js/plugins/plugin.icons.js)
• Plugin Name: insertdatetime — Insert date/time (legacy: legacy/public/js/plugins/plugin.insertdatetime.js)
• Plugin Name: print — Print (legacy: legacy/public/js/plugins/plugin.print.js)
• Plugin Name: save — Save button (legacy: legacy/public/js/plugins/plugin.save.js)
• Plugin Name: shortcuts_help — Keyboard shortcuts help (legacy: legacy/public/js/plugins/plugin.shortcuts.help.js)
• Plugin Name: tools_emoji — Emoji picker (legacy: legacy/public/js/plugins/plugin.tools.emoji.js)

View

• Plugin Name: preview — Preview (legacy: legacy/public/js/plugins/plugin.preview.js)
• Plugin Name: view_fullscreen — Fullscreen (legacy: legacy/public/js/plugins/plugin.view.fullscreen.js)
• Plugin Name: view_source — Source view (legacy: legacy/public/js/plugins/plugin.view.source.js)
• Plugin Name: visualblocks — Visual blocks (legacy: legacy/public/js/plugins/plugin.visualblocks.js)