SunEditor Plugins

SunEditor ships with 24 built-in plugins covering media, formatting, and advanced features.
Each plugin belongs to a display type that determines how it appears in the toolbar.

Built-in Plugins by Display Type

The display property defines how the plugin interacts with the user.

Try Plugin Options

Plugins marked configurable have options you can tweak in the Playground.

Playground — Plugin Options Sidebar

Adjust image upload limits, font size units, table scroll types, mention triggers, and more. Changes apply instantly to a live editor.

Open Playground

Create Your Own Plugin

Technical reference for building custom plugins — from simple command buttons to full dialog-based features.

Inheritance Chain

KernelInjector→Base→PluginCommand / PluginModal / PluginDropdown / ...

Class References

Dependency Injection

All editor services are accessed via this.$ — never import core modules directly.

Contracts via Interfaces

Implement multiple contracts (ModuleModal, EditorComponent) to hook into lifecycles.

Quick Start

import { PluginCommand } from 'suneditor/src/interfaces';

class HelloWorld extends PluginCommand {
  static key = 'helloWorld';

  /**
   * @constructor
   * @param {SunEditor.Kernel} kernel - The Kernel instance
   */
  constructor(kernel) {
    super(kernel);
    this.title = 'Hello World';
    this.icon = '<span style="font-size:14px">HW</span>';
  }

  /**
   * @override
   * @type {PluginCommand['action']}
   */
  action() {
    this.$.html.insert('<p>Hello, World!</p>');
    this.$.history.push(false);
  }
}

export default HelloWorld;

Choose a base class based on how your plugin interacts with the user.

PluginCommandcommandRequired: action()

Button click executes action immediately

Built-in examples: blockquote, hr, strike

PluginDropdowndropdownRequired: action()

Button opens menu, item click calls action()

Built-in examples: align, font, blockStyle

PluginDropdownFreedropdown-free

Button opens menu, plugin handles own events

Built-in examples: table, fontColor

PluginModalmodalRequired: open(), modalAction()

Button opens modal dialog

Built-in examples: link, image, video

PluginBrowserbrowserRequired: open(), close()

Button opens gallery/browser interface

Built-in examples: imageGallery

PluginFieldfield

Responds to editor input events

Built-in examples: mention

PluginInputinput

Toolbar input element (not a button)

Built-in examples: pageNavigator

PluginPopuppopupRequired: show(), controllerAction()

Inline popup context menu

Built-in examples: anchor

Cross-Plugin Composition

A plugin can also implements other plugin type interfaces to provide multiple interaction modes.

fontSizeextends PluginInput+ PluginCommand+ PluginDropdown

Input field + dropdown list + command (inc/dec) all controlling font size.

list_bulleted / list_numberedextends PluginCommand+ PluginDropdown

Command button for toggling list + dropdown for selecting list style.

Resources

API Reference

Full method & option documentation

Plugin Source Code

Read the built-in plugin implementations

Community

GitHub Discussions for Q&A

Built-in Plugins by Display Type

The display property defines how the plugin interacts with the user.

import { PluginCommand } from 'suneditor/src/interfaces'; class HelloWorld extends PluginCommand { static key = 'helloWorld'; /** * @constructor * @param {SunEditor.Kernel} kernel - The Kernel instance */ constructor(kernel) { super(kernel); this.title = 'Hello World'; this.icon = '<span style="font-size:14px">HW</span>'; } /** * @override * @type {PluginCommand['action']} */ action() { this.$.html.insert('<p>Hello, World!</p>'); this.$.history.push(false); } } export default HelloWorld;