插件系统

vkedit 的所有功能都以插件形式提供。插件是自包含的功能模块，通过 EditorHost 安装后即可工作。

插件分类

类别	说明	示例
核心插件	编辑器基础功能，由 `createEditorHost()` 自动安装	ToolbarManagerPlugin, SelectionPlugin, ElementManagerPlugin
功能插件	提供特定功能模块	ExportPlugin, ImportPlugin, PreviewPlugin
图形插件	提供可绘制的图形元素	RectPlugin, TextPlugin, QrcodePlugin

BasePlugin 基类

所有插件继承自 BasePlugin。子类必须实现 name 和 version 抽象属性，可选重写生命周期钩子：

typescript

import { BasePlugin } from 'vkedit'

class MyPlugin extends BasePlugin {
  // 必填：插件标识（kebab-case）
  public name = 'my-plugin'
  // 必填：版本号
  public version = '1.0.0'

  // 安装时调用（protected，可访问 this.host）
  protected onInstall(): void {
    // 注册工具栏按钮、绑定事件等
  }

  // 卸载时调用（protected）
  protected onUninstall(): void {
    // 清理资源、移除事件监听
  }

  // 激活时调用（可选）
  protected onActivate(): void {}

  // 停用时调用（可选）
  protected onDeactivate(): void {}
}

生命周期

方法	可见性	调用时机
`onInstall()`	protected	`installPlugin()` 时调用
`onUninstall()`	protected	`uninstallPlugin()` 时调用
`onActivate()`	protected	`activate()` 时调用
`onDeactivate()`	protected	`deactivate()` 时调用

安装与卸载

typescript

// 安装插件（返回 host 自身，支持链式调用）
host.installPlugin('rect-plugin', RectPlugin)

// 获取插件实例（不存在时抛出异常）
const plugin = host.getPlugin('rect-plugin')

// 卸载插件（触发 onUninstall）
host.uninstallPlugin('rect-plugin')

核心插件一览

以下插件由 createEditorHost() 自动安装：

插件	注册标识	说明
ToolbarManagerPlugin	`'toolbar-manager-plugin'`	工具栏管理
GraphicToolManagerPlugin	`'graphic-tool-manager-plugin'`	图形工具管理
GraphicManagerPlugin	`'graphic-manager-plugin'`	图形渲染管理
PropertyPanelManagerPlugin	`'property-panel-manager-plugin'`	属性面板管理
ElementManagerPlugin	`'element-manager-plugin'`	元素管理（增删查、创建实例）
KeyDownPlugin	`'keydown-plugin'`	键盘快捷键
SelectionPlugin	`'selection-plugin'`	元素选择
SnapPlugin	`'snap-plugin'`	吸附对齐
ClipboardPlugin	`'clipboard-plugin'`	复制粘贴
AlignPlugin	`'align-plugin'`	对齐分布
ContextMenuManagerPlugin	`'context-menu-manager-plugin'`	右键菜单管理

以下插件由 createEditorHost() 默认安装，可通过选项禁用：

插件	注册标识	默认	禁用选项
ImportPlugin	`'import-plugin'`	安装	`importPlugin: false`
ExportPlugin	`'export-plugin'`	安装	`exportPlugin: false`
PreviewPlugin	`'preview-plugin'`	安装	`previewPlugin: false`

插件标识命名规范

所有内置插件使用 功能名-plugin 格式（如 'rect-plugin'、'selection-plugin'）。自定义插件建议遵循同样的命名规范。

下一步

核心插件一览 -- 每个核心插件的详细用法
自定义插件开发 -- 开发自己的插件
命令模式 -- 插件如何通过命令操作元素

插件系统 ​

插件分类 ​

BasePlugin 基类 ​

生命周期 ​

安装与卸载 ​

核心插件一览 ​

下一步 ​