页面集成（基础）

本页展示如何在业务页面里以最小成本接入编辑器。
推荐将业务容器组件命名为 PageDesigner，内部使用 VEEditor。

为什么推荐 PageDesigner

• 语义清晰：页面设计器，而不是单一 UI 组件。
• 便于扩展：后续加入保存、预览、权限控制时命名仍成立。
• 便于团队协作：路由、菜单、日志中一眼可识别。

最小可用示例

下面示例仅保留两个最核心回调：save-page 和 preview。

<template>
  <div class="page-designer">
    <VEEditor
      @save-page="handleSavePage"
      @preview="handlePreview"
    />
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { updatePageDetail } from '@/api/common/base/Page.js'

const router = useRouter()

const handleSavePage = async (data) => {
  if (!data) return

  const pageData = sessionStorage.getItem(data.cacheId)
  if (!pageData) return

  await updatePageDetail({
    id: data.id,
    name: data.title,
    pageData,
  })
}

const handlePreview = (data) => {
  if (!data) return
  router.push({
    path: '/preview',
    query: data,
  })
}
</script>

<style scoped>
.page-designer {
  width: 100%;
  height: 100%;
  padding: 5px;
}
</style>

运行项目后，出现如下页面表示接入成功：

细心的你会发现左侧组件页签中并没有任何可用组件，这是因为HFLVEditor3本身只是编辑器，并不包含组件库，继续往下探索吧。

TIP

先完成基础接入，再逐步增加「打开页面、导入导出、自定义按钮」等能力，可显著降低首次接入复杂度。

建议的路由与文件命名

项目	推荐名称
页面组件文件	PageDesigner.vue
路由路径	/page-designer
菜单名称	可视化页面设计器

进阶

如果你需要完整的业务能力（打开、导入导出、自定义按钮、站号选择等），请继续阅读：页面集成（高级）。