快速上手
本节将引导你在 Vue 3 项目中集成 vkedit，运行一个包含矩形和文本元素的图形编辑器。
配置入口文件
vkedit 基于 vue-konva 渲染，需在应用入口文件中注册 VueKonva 并引入样式：
typescript
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import VueKonva from 'vue-konva'
import 'vkedit/dist/vkedit.css'
const app = createApp(App)
app.use(VueKonva)
app.mount('#app')使用编辑器组件
通过 createEditorHost() 创建宿主实例（自动安装全部核心插件），然后安装需要的图形插件：
vue
<!-- App.vue -->
<template>
<div style="width: 100%; height: 100vh;">
<Vkedit :host="host" />
</div>
</template>
<script setup lang="ts">
import { createEditorHost, Vkedit, RectPlugin, TextPlugin } from 'vkedit'
const host = createEditorHost()
// 安装图形插件
host
.installPlugin('rect-plugin', RectPlugin)
.installPlugin('text-plugin', TextPlugin)
// 设置画布尺寸（50mm × 50mm）
host.setStatus({ wmm: 50, hmm: 50 })
</script>createEditorHost() 会自动安装工具栏管理、图形工具管理、图形管理、属性面板管理、元素管理、键盘快捷键、选择、吸附、剪贴板、对齐、右键菜单等核心插件，以及导入、导出、预览功能插件。你只需安装需要的图形插件。安装后工具栏会显示矩形和文本的绘制按钮，点击按钮在画布上拖拽即可创建图形。
createEditorHost 选项
createEditorHost 接受一个可选配置对象，可控制默认插件的安装：
| 选项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
basePropertyPanel | boolean | false | 安装基础元素属性面板 |
baseCanvasPropertyPanel | boolean | true | 安装画布属性面板 |
exportPlugin | boolean | true | 安装导出插件 |
previewPlugin | boolean | true | 安装预览插件 |
importPlugin | boolean | true | 安装导入插件 |
typescript
// 仅安装核心插件，不安装导出/导入/预览
const host = createEditorHost({
exportPlugin: false,
importPlugin: false,
previewPlugin: false,
})Vkedit 组件 Props
| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
host | EditorHost | -- | 必填，编辑器宿主实例 |
showToolbox | boolean | true | 显示左侧工具箱 |
showPropertyPanel | boolean | true | 显示右侧属性面板 |
showToolbar | boolean | true | 显示顶部工具栏 |
EditorHost 是核心
EditorHost 是 vkedit 的核心宿主实例，负责管理插件、命令、事件和画布。所有操作都通过 host 实例进行。详见 EditorHost 核心概念。