SunEditor插件

SunEditor 附带 24 个内置插件，涵盖媒体、格式和高级功能。
每个插件都属于一个 显示类型，该类型决定了它在工具栏中的显示方式。

按显示类型分类的内置插件

display 属性定义了插件如何与用户交互。

尝试插件选项

标记为 configurable 的插件具有可在 Playground 中进行调整的选项。

Playground — 插件选项侧边栏

调整图片上传限制、字体大小单位、表格滚动类型、提及触发器等。更改会立即在实时编辑器中生效。

开放式游乐场

创建您自己的插件

构建自定义插件的技术参考——从简单的命令按钮到完整的基于对话框的功能。

继承链

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

类参考

在 options.plugins 文件中注册插件类。核心程序会实例化它们。

依赖注入

所有编辑器服务都通过 this.$ 访问——切勿直接导入核心模块。

通过接口签订合同

实现多个合约（ModuleModal、EditorComponent）以接入生命周期。

快速入门

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;

根据插件与用户的交互方式选择一个基类。

PluginCommandcommand必需的: action()

Button click executes action immediately

内置示例: blockquote, hr, strike

PluginDropdowndropdown必需的: action()

Button opens menu, item click calls action()

内置示例: align, font, blockStyle

PluginDropdownFreedropdown-free

Button opens menu, plugin handles own events

内置示例: table, fontColor, codeBlock

PluginModalmodal必需的: open(), modalAction()

Button opens modal dialog

内置示例: link, image, video

PluginBrowserbrowser必需的: open(), close()

Button opens gallery/browser interface

内置示例: imageGallery

PluginFieldfield

Responds to editor input events

内置示例: autocomplete

PluginInputinput

Toolbar input element (not a button)

内置示例: pageNavigator

PluginPopuppopup必需的: show(), controllerAction()

Inline popup context menu

内置示例: anchor

跨插件组合

插件还可以实现其他插件类型的接口，以提供多种交互模式。

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.

资源

API 参考

完整的方法和选项文档

插件源代码

阅读内置插件的实现

社区

GitHub 问答讨论区

按显示类型分类的内置插件

display 属性定义了插件如何与用户交互。

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;