Skip to content

核心插件一览

以下核心插件由 createEditorHost() 自动安装,无需手动安装。了解各插件的功能有助于更好地使用编辑器。

插件列表

ToolbarManagerPlugin

注册标识:'toolbar-manager-plugin'

管理工具栏的按钮注册和分组。监听 tool:registered 事件收集工具按钮,提供按分组查询工具列表的能力。

typescript
const toolbar = host.getPlugin('toolbar-manager-plugin')
const allTools = toolbar.getTools()
const toolsByGroup = toolbar.getGroupedTools()

GraphicToolManagerPlugin

注册标识:'graphic-tool-manager-plugin'

管理图形绘制工具的注册。图形插件安装时通过 graphic-tool:registered 事件注册工具按钮,此插件负责收集和管理。

typescript
const toolManager = host.getPlugin('graphic-tool-manager-plugin')
const toolList = toolManager.getToolList()

GraphicManagerPlugin

注册标识:'graphic-manager-plugin'

管理图形渲染组件的注册。图形插件安装时通过 graphic:registered 事件注册渲染组件。

PropertyPanelManagerPlugin

注册标识:'property-panel-manager-plugin'

管理属性面板的注册。图形插件安装时通过 property-panel:registered 事件注册属性面板组件。

ElementManagerPlugin

注册标识:'element-manager-plugin'

管理画布上所有元素实例的增删查和创建。是元素操作的核心插件。

typescript
const elementManager = host.getPlugin('element-manager-plugin')

// 创建元素实例
const element = elementManager.createElement('rect')

// 添加元素到画布
elementManager.addElement(element)

// 获取元素
const el = elementManager.getElement('element-id')

// 获取所有元素
const allElements = elementManager.getAllElements()

// 删除元素
elementManager.removeElement('element-id')

元素创建

createElement(type) 是创建元素实例的标准方式。详见 元素创建

KeyDownPlugin

注册标识:'keydown-plugin'

提供键盘快捷键支持:

快捷键功能
Delete删除选中元素
Ctrl+Z撤销
Ctrl+Y重做
Ctrl+C复制选中元素
Ctrl+V粘贴
方向键微移选中元素(1px)
Shift+方向键快速移动选中元素(10px)
Escape清空选择

输入框聚焦时不响应

当焦点在 <input><textarea> 上时,快捷键(除 Delete 外)不响应,避免与文本编辑冲突。

SelectionPlugin

注册标识:'selection-plugin'

提供元素点选、框选、多选(Ctrl/Shift 加选)能力。

typescript
const selection = host.getPlugin('selection-plugin')

// 获取选中的元素
const elements = selection.getSelectionElements()

// 获取选中的元素 ID
const ids = selection.getSelectionElementIds()

// 手动选中元素
selection.selectElement(element)

// 取消选中
selection.deselectElement(elementId)

// 清空选择
selection.clearSelection()

// 按 ID 批量选中
selection.selectElementByIds(['id-1', 'id-2'])

SnapPlugin

注册标识:'snap-plugin'

提供元素拖拽时的辅助线吸附功能。

typescript
const snap = host.getPlugin('snap-plugin')

// 查询吸附状态
snap.isSnapEnabled() // boolean

// 切换吸附开关
snap.toggleSnap()

吸附也可通过 host.status.snapToGrid 直接控制:

typescript
host.setStatus({ snapToGrid: true })  // 开启
host.setStatus({ snapToGrid: false }) // 关闭

详见 画布与坐标系 -- 网格与吸附

ClipboardPlugin

注册标识:'clipboard-plugin'

提供复制、粘贴、克隆功能。

typescript
const clipboard = host.getPlugin('clipboard-plugin')

// 复制
clipboard.copy(elements)

// 粘贴(在鼠标位置或偏移位置)
const newIds = clipboard.paste()

// 克隆(Alt+拖拽时使用)
clipboard.cloneElementsAt(elements, { x: 5, y: 5 })

// 检查剪贴板是否有数据
clipboard.hasData() // boolean

// 清空剪贴板
clipboard.clear()

AlignPlugin

注册标识:'align-plugin'

在工具栏注册对齐按钮,提供 6 向对齐和水平/垂直均分。

详见 对齐与分布

ContextMenuManagerPlugin

注册标识:'context-menu-manager-plugin'

管理右键菜单的注册。图形插件安装时通过 context-menu:registered 事件注册上下文菜单组件。

下一步

基于 MIT 许可发布