EditorHost 宿主实例

EditorHost 是 vkedit 的核心类，是整个编辑器的"大脑"。它负责：

• 插件管理 -- 安装、卸载、获取插件实例
• 命令执行 -- 执行命令并管理撤销重做栈
• 事件总线 -- 发布和订阅编辑器事件
• 画布状态 -- 管理画布尺寸、DPM、缩放等状态

创建实例

通常使用 createEditorHost() 创建已安装核心插件的实例：

import { createEditorHost } from 'vkedit'

const host = createEditorHost()

也可手动创建空实例，自行安装插件：

import { EditorHost } from 'vkedit'

const host = new EditorHost()

单例使用

一个编辑器实例对应一个 EditorHost。如果你的页面只需要一个编辑器，创建一个实例即可。多编辑器场景请创建多个独立的 EditorHost 实例。

核心 API

插件管理

import {
  RectPlugin,
  TextPlugin,
  LinePlugin,
  BarcodePlugin,
  QrcodePlugin,
  ChartPlugin,
  TablePlugin
} from 'vkedit'

// 安装图形插件（createEditorHost 已内置核心管理类插件，图形插件需手动安装）
host
  .installPlugin('rect-plugin', RectPlugin)
  .installPlugin('text-plugin', TextPlugin)
  .installPlugin('line-plugin', LinePlugin)
  .installPlugin('barcode-plugin', BarcodePlugin)
  .installPlugin('qr-plugin', QrcodePlugin)
  .installPlugin('chart-plugin', ChartPlugin)
  .installPlugin('table-plugin', TablePlugin)

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

// 卸载插件
host.uninstallPlugin('rect-plugin')

画布状态管理

画布状态存储在 host.status 对象中，通过 host.setStatus() 修改：

// 设置画布尺寸（毫米）
host.setStatus({ wmm: 210, hmm: 297 })

// 设置 DPM
host.setStatus({ dpm: 12 })

// 设置缩放比例
host.setStatus({ zoom: 0.5 })

// 读取当前状态
const { wmm, hmm, width, height, dpm, zoom } = host.status

setStatus 接受 Partial<IEditorState>，会自动联动计算像素尺寸。修改 wmm/hmm 时自动重算 width/height，修改 dpm 时自动重算所有像素尺寸。

JSON 序列化

前提条件

loadJSON 依赖 element-manager-plugin 插件来重建元素。调用前需确保已安装该插件，否则会抛出"不存在插件: element-manager-plugin"异常。使用 createEditorHost() 创建的实例已默认安装。

import { ElementManagerPlugin } from 'vkedit'

// 若使用 new EditorHost() 手动创建实例，需先安装插件
host.installPlugin('element-manager-plugin', ElementManagerPlugin)

// 导出 JSON 字符串
const json = host.toJSON()

// 从 JSON 字符串加载（会清空当前画布）
host.loadJSON(json)

命令执行

import { AddElementCommand } from 'vkedit'

// 通过 element-manager-plugin 创建一个矩形元素（前提：已注册 rect 图形插件）
const element = host.getPlugin('element-manager-plugin').createElement('rect')

// 执行命令（自动进入撤销栈）
host.executeCommand(new AddElementCommand(host, element))

// 撤销
host.undo()

// 重做
host.redo()

事件监听

import type { ElementEventData } from 'vkedit'

// 监听事件
const onElementAdded = (data: ElementEventData) => {
  console.log('元素已添加:', data.element.id)
}
host.on('element:added', onElementAdded)

// 移除监听（须传入同一函数引用）
host.off('element:added', onElementAdded)

生命周期

new EditorHost() 或 createEditorHost()
  ↓
installPlugin() × N    ← 安装所有需要的插件
  ↓
setStatus({ wmm, hmm }) ← 设置画布尺寸
  ↓
<Vkedit :host="host" /> ← 挂载到 Vue 组件
  ↓
... 用户交互 ...
  ↓
组件卸载时移除事件监听   ← 在 onUnmounted 中清理

清理资源

EditorHost 目前没有内置 destroy() 方法。在组件卸载时，应手动移除所有事件监听以避免内存泄漏。

在 Vue 中使用

<script setup lang="ts">
import { createEditorHost, RectPlugin, Vkedit } from 'vkedit'
import { ref, onMounted, onUnmounted } from 'vue'

const host = createEditorHost()

const onSelectionChanged = (data: { selection: any[] }) => {
  console.log('选中数量:', data.selection.length)
}

onMounted(() => {
  host.installPlugin('rect-plugin', RectPlugin)
  host.on('selection:changed', onSelectionChanged)
})

onUnmounted(() => {
  host.off('selection:changed', onSelectionChanged)
})
</script>

<template>
  <Vkedit :host="host" />
</template>

下一步

• 插件系统 -- 了解插件的分类和架构
• 命令模式 -- 深入撤销重做机制
• 事件系统 -- 掌握事件驱动编程