一个 h5 页面编辑器。不同于使用绝对定位布局的方式，h5-editor 使用了标准的文档流进行布局，减少关联组件之间定位所需要的各种计算， 使得组件之间父子级关系一目了然，整块操作（拖拽、锁定/解锁、统一样式设置）更为方便。使用 h5-editor，只需稍加熟悉，你便你能像专业前端开发者那样得心应手，创建出你想要的精美页面

目前 h5-editor 内有 8 个组件可供使用，其中 4 个基础组件，集成 4 个Vant（有赞） 组件，满足基本业务场景

特点

• 所见即所得 - h5-editor 抽离了"解析器"组件，编辑和预览都是通过它解析，所以编辑器里是什么样，结果就是什么样
• 自定义组件 - 当你需要在不同页面频繁拖拽一个相同或者大致相同的组件时，可以右键选择做成组件功能，让该组件成为自定义组件，此后可以在左侧列表中拖拽复用，拒绝重复操作
• 样式继承 - 由于使用了标准文档流，你可以通过一个容器（div)组件预先设置好样式，其内部组件样式会默认继承该组件样式，拒绝重复操作
• 一键预览 - 右侧工具栏中点击预览可随时查看页面效果
• 自适应布局 - 预览器内部通过计算，将编辑时得到的px像素，转化为可自适应的rem单位，实现不同分辨率端自适应
• 扫码或链接查看/分享 - 在文档库页面，可以通过扫码或访问链接的方式进行查看或分享
• 事件绑定 - 可以通过属性面板为组件绑定对应的事件并执行指定动作
• 支持接口数据源 - 可在数据源面板添加三方接口作为数据源
• 动态渲染变量 - 通过{{数据源}}的方式可以将数据源中的数据渲染到页面上

Demo

快速开始

# 依赖安装
$ npm install
# 启动前端工程
$ npm run front-serve
# 启动后端接口服务
$ npm run back-server

关于后端接口服务启动报错

如何部署

$ npm run build

执行上述命令后会在根目录得到dist文件夹，其中包含front前端代码和server后端代码

前端部署

直接将打包后得到的front目录部署到nginx或其它服务器中,并将/api和 /static露路径代理到接口服务中， 可参照此nginx.conf配置文件

后端部署

1. 将打包后的server目录上传服务器

2. $ npm install --production 安装依赖

3. 启动服务

   • 推荐使用 pm2

      $ pm2 start ecosystem.config.js
     

     pm2 方式启动配置了监听文件变动重启，后续更新代码会自动重启

   • 直接启动

      $ node index.js
     

Docker

1. 将执行完build后的到的dist目录上传到服务器中

2. 构建镜像

     # 进入根目录
     $ cd dist
     # 构建镜像
     $ docker build -t h5editor .
   

3. 启动容器

     $ docker run -dit --name h5editor -v $PWD:/app -p 5000:80 h5editor
   

   上述启动容器是在 dist 目录下进行的，即把 dist 目录挂载到容器中，随后文件变动/更新将同步到容器中 。 当然，服务端代码变动也会自动重启

关于前端

前端采用vue3+typescript开发,并使用以下库

• element-plus 整个前端 UI 框架
• Vant 构建三方组件库
• html2canvas 文稿封面截图
• jsondiffpatch json 差异对比，h5-editor 通过jsondiffpatch进行差异对比，并通过差异进行patch和unpatch以实现撤销/重做
• axios http 请求
• qrcode 生成二维码

  关于撤销/重做的实现逻辑可查看此文档

组件

内置组件

• Component：所有小组件的基类，开发组件需要继承它
• ComponentWrapper：用来包裹组件，实现了点击、拖拽、缩放的功能性组件。任何组件都需要包裹在其中
• Container：容器组件，类似于div。
• Button:按钮
• Img:图片
• Text:文本

集成三方组件(Vant)

• NvaBar:标题/导航栏
• NoticeBar:通知栏
• Swiper:轮播
• Tab:标签页组件

关于后端

后端采用 Express(4.x) + typescript开发，并使用了如下库

• nedb-promises 以 json 文件本地存储的数据库
• ejs js 模板引擎，用于服务端渲染页面

备份&迁移

文档数据存储在文件根目录data目录中。备份迁移只需要此文件夹即可。容器挂载目录/app/data

Q&A

#expres 启动报错

启动后端接口时得到如下错误

throw new TypeError('Router.use() requires a middleware function but got a ' + gettype(fn))

遇到此问题，请在server/src/index.ts中把设置模板引擎的代码随意换个位置即可，具体原因不详。 根据 express issue 中的解释 是因为未使用app.set替代app.use设置模板引擎 但是此项目中确实用的是app.set却依旧报错。根据尝试只需要随意换个位置即可成功运行.

const compression = require('compression');
app.use(compression());
- app.set('view engine', 'ejs');
require('express-async-errors');
+ app.set('view engine', 'ejs');
app.all('*', function (req: Request, res: Response, next: NextFunction) {

Licenses

致谢

感谢JetBrains提供的开源License

https://jb.gg/OpenSourceSupport