Skip to content

一个基于标准文档流、可自定义组件的h5编辑器

License

Notifications You must be signed in to change notification settings

mgsod/h5-editor

Repository files navigation

h5-editor

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

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

特点

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

快速开始

# 依赖安装
$ 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进行差异对比,并通过差异进行patchunpatch以实现撤销/重做
  • 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

MIT license

致谢

感谢JetBrains提供的开源License

JetBrains Logo (Main) logo

https://jb.gg/OpenSourceSupport

About

一个基于标准文档流、可自定义组件的h5编辑器

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published