H5 可视化编辑器

H5 可视化编辑器是面向营销活动、邀请函、宣传落地页的零代码、低代码搭建工具：拖拽画布、配置属性，最终产出可在移动端浏览器运行的页面。

编辑器和正式 H5 要拆开——编辑态很重，运行态只吃一份 JSON。

需求分析

业务功能需求

物料组件能力

• 基础物料：文本、图片、矩形形状、音频、视频、链接、按钮；

• 扩展物料：表单、轮播、抽奖、倒计时等业务组件；

• 后续可按需扩展更多自定义业务组件。

画布编辑能力

• 新增元素：拖拽组件库物料到画布，或者上传资源生成元素；
• 元素操作：拖拽移动位置、缩放大小、旋转、复制、删除、锁定、显隐；
• 属性编辑：不同组件拥有独立属性面板；
  • 文本：字体、字号、颜色、行高、对齐；
  • 图片：裁剪、圆角、阴影、透明度；
• 动画编辑：入场动画、强调动画、出场动画，支持设置延迟、时长，画布实时预览动画效果；
• 页面管理：多页H5（翻页画册）、长滚动页面、满屏页，新增/复制/删除页面；
• 辅助能力：吸附对齐、参考线、标尺、撤销重做、图层管理、多选批量操作。

预览与发布

• 实时预览：编辑过程预览，完整手机模式预览；
• 作品存储：将画布所有页面、组件、样式、动画序列，序列化为结构化数据；
• 渲染输出：解析存储的数据，在移动端渲染出最终H5页面；
• 导出能力：预览链接、二维码、部分开源项目支持导出完整HTML源码。

后端交互需求

• 保存：将页面配置JSON、图片/音视频等资源上传服务端；
• 读取：根据作品ID拉取JSON配置，前端渲染器解析渲染页面；
• 表单类H5还需要提供数据提交、数据收集接口。

技术痛点需求

移动端H5编辑器有两套主流适配方案：

• 固定尺寸：画布固定模拟手机尺寸（如375px宽度），输出页面按比例缩放，绝大多数营销H5工具采用该模式；

• 百分比流式布局：使用百分比单位，页面自适应任意屏幕宽度，适合长页面。

三类产品实现方案对比

市面上H5可视化工具分为三类实现路线：

备注：市面上绝大多数商用H5工具（易企秀、Maka、兔展）以及开源项目，底层本质都是拖拽操作生成JSON配置，渲染器解析JSON生成H5页面。

实现原理

整个编辑器系统分为两大核心模块：编辑模块（编辑器）、渲染模块（预览/发布）。

核心：编辑态和运行态完全解耦。编辑器很重，包含拖拽、属性面板；而最终产出H5页面只需要轻量渲染器，不需要编辑器相关代码。

编辑器模块（编辑态）

• 左侧物料组件库，中间画布编辑区，右侧属性配置面板；
• 用户拖拽物料，画布维护内存页面数据模型（JSON）；
• 用户修改右侧属性面板，同步更新内存JSON；
• 做画布交互：拖拽、缩放、多选、吸附、动画配置，实时同步数据模型；
• 保存时，把完整JSON提交后端存储。

渲染模块（预览/正式H5页面，运行态）

• 获取后端返回的页面JSON配置；
• 遍历JSON，通过动态组件，还原页面、组件、样式、动画；
• 不依赖编辑器代码，只依赖轻量化渲染SDK，在手机浏览器直接运行。

JSON配置结构示意：

{
  "pages": [
    {
      "pageId":"page01",
      "style":{"background":"#ffffff"},
      "elements":[
        {
          "compType":"text",
          "props":{"content":"标题文字","fontSize":"28px","color":"#333"},
          "style":{"left":10,"top":20,"width":300,"height":60},
          "animate":{"in":{"name":"fadeIn","duration":1000,"delay":0}}
        }
      ]
    }
  ]
}

JSON字段含义：

• pages：页面数组，多页翻页H5会存在多个page；
• elements：当前页面下所有组件数组；
• compType：组件类型，文本/图片/视频；
• props：组件业务属性；
• style：定位、大小、颜色等样式；
• animate：动画配置，动画名称、时长、延迟。

核心实现思路

画布拖拽系统

• 开源常用库：react-dnd（React 生态）、vuedraggable（Vue 生态），实现物料拖拽入画布；
• 画布内部元素的移动、缩放：react-draggable，vue-draggable-resizable；
• 画布一般使用iframe隔离环境，防止编辑器页面的CSS、JS污染编辑中的H5页面。

组件化设计

采用双套组件设计：

• 编辑态组件：画布内可拖拽、可选中、带选中框、控制点，只在编辑器内部运行；
• 运行态组件：干净的展示组件，只负责渲染内容，用于预览和正式发布页面。

提供组件注册入口，新增业务组件，同时编写编辑态+运行态组件，再配置属性表单，即可扩展物料。

属性面板

根据当前选中组件的compType，动态渲染右侧属性表单；表单修改值直接回写页面JSON数据模型，画布实时响应更新。

动画系统

编辑器层维护动画配置JSON；运行态引入动画库（animate.css），读取配置给DOM绑定动画class、设置动画延迟和时长。

数据持久化

• 保存：把完整页面JSON传给后端；图片音视频资源先上传OSS，JSON内只保存资源URL；
• 本地缓存：编辑过程使用 IndexedDB 做自动本地备份，防止浏览器刷新丢失作品。

渲染器

运行态渲染器只接收JSON配置，循环遍历pages和elements，动态渲染组件。

• Vue：使用<component :is="compType">动态组件；
• React：使用动态导入组件，根据type渲染对应组件。

辅助交互能力

• 图层系统：组件Z轴管理，上移下移、锁定隐藏；
• 撤销重做：维护操作栈，记录每一次数据变更；
• 多选批量操作：按住Ctrl多选组件，统一修改样式、对齐。

安全注意点

• 自定义JS脚本风险：用户注入恶意脚本，正式发布环境建议沙箱iframe隔离自定义脚本；
• XSS风险：文本内容需要做转义，防止XSS注入攻击。

主流可视化编辑器介绍

分为商用SaaS产品（开箱即用，面向运营）、开源项目（可二次开发，面向开发人员）。

商用SaaS H5编辑器

商用SaaS优势：开箱即用，大量现成模板，不用写代码；缺点：私有化部署成本高，定制能力受限。

开源H5可视化编辑器（可二次开发）

H5-Dooring

Github：https://github.com/MrXujiang/h5-Dooring

技术栈：React + dva + antd + react-dnd + Koa2

特点：免费开源，完整H5落地页解决方案；支持拖拽编辑、预览、保存模板、移动端适配；支持导出页面源码；组件可扩展；同时支持H5和大屏。

局限：部分高级交互组件需要自行扩展。

H5DS

Github：https://github.com/h5ds/h5ds

技术栈：React + Mobx，后端EggJS

特点：内核插件化架构，插件可动态加载；支持动画时间轴精细控制，支持PC/手机双画布；可改造为PPT、BI等工具；v5开源，v6版本商业授权。

适合：需要深度二次开发，做自定义可视化工具。

Quark-H5

Gitee：https://gitee.com/kiming209_admin/quark-h5

技术栈：Vue2 + Vuex + Element-UI + Koa2 + MongoDB

特点：Vue技术栈，star数量高；拖拽编辑，动画预览；后端完整，数据库存储作品JSON。

适合Vue技术栈团队快速搭建私有化H5编辑器。

鲁班H5（luban-h5）

文档：https://ly525.github.io/luban-h5/zh/

技术栈：Vue2，后端Strapi

特点：参考线、吸附、对齐、复制删除页面元素；内置表单组件；支持模板库；表单数据收集；支持二维码预览。

局限：部分高级功能暂未开放，如PSD一键转H5、自定义脚本。

H5-Editor

Github：https://github.com/a7650/h5-editor

技术栈：Vue2 + Element-UI + Vuex

特点：纯前端编辑器，不需要后端；标尺参考线、吸附、图层管理、多选对齐；indexDB本地备份；快捷键支持；插件系统，可二次开发；支持一键导出HTML。

适合：优先做前端编辑器，后端可以后续接入。

GrapesJS（国外通用网页编辑器）

Github：https://github.com/GrapesJS/grapesjs

不专门面向移动端H5，是通用网页拖拽编辑器；插件生态丰富，支持自定义HTML/CSS/JS代码，适合做通用建站工具。