核心插件一览
以下核心插件由 createEditorHost() 自动安装,无需手动安装。了解各插件的功能有助于更好地使用编辑器。
插件列表
ToolbarManagerPlugin
注册标识:'toolbar-manager-plugin'
管理工具栏的按钮注册和分组。监听 tool:registered 事件收集工具按钮,提供按分组查询工具列表的能力。
const toolbar = host.getPlugin('toolbar-manager-plugin')
const allTools = toolbar.getTools()
const toolsByGroup = toolbar.getGroupedTools()GraphicToolManagerPlugin
注册标识:'graphic-tool-manager-plugin'
管理图形绘制工具的注册。图形插件安装时通过 graphic-tool:registered 事件注册工具按钮,此插件负责收集和管理。
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'
管理画布上所有元素实例的增删查和创建。是元素操作的核心插件。
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 加选)能力。
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'
提供元素拖拽时的辅助线吸附功能。
const snap = host.getPlugin('snap-plugin')
// 查询吸附状态
snap.isSnapEnabled() // boolean
// 切换吸附开关
snap.toggleSnap()吸附也可通过 host.status.snapToGrid 直接控制:
host.setStatus({ snapToGrid: true }) // 开启
host.setStatus({ snapToGrid: false }) // 关闭详见 画布与坐标系 -- 网格与吸附。
ClipboardPlugin
注册标识:'clipboard-plugin'
提供复制、粘贴、克隆功能。
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 事件注册上下文菜单组件。