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

📕h5可视化编辑器，支持添加图片/文本/形状等，拥有图层/参考线/标尺/自动吸附对齐等功能
https://github.com/a7650/h5-editor

buider drag element-ui h5editor javascript plugins poster vue vuejs2

Last synced: about 1 month ago
JSON representation

📕h5可视化编辑器，支持添加图片/文本/形状等，拥有图层/参考线/标尺/自动吸附对齐等功能

• Host: GitHub
• URL: https://github.com/a7650/h5-editor
• Owner: a7650
• License: mit
• Created: 2020-07-27T02:04:13.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-29T02:17:59.000Z (7 months ago)
• Last Synced: 2024-09-28T17:41:38.849Z (about 1 month ago)
• Topics: buider, drag, element-ui, h5editor, javascript, plugins, poster, vue, vuejs2
• Language: Vue
• Homepage: https://a7650.github.io/h5-editor/#/
• Size: 4.38 MB
• Stars: 742
• Watchers: 15
• Forks: 153
• Open Issues: 33
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
H5-Editor 

可视化操作，拖拽生成页面，导出html文件

针对开发人员具有编辑器插件系统，支持和现有项目继承，支持二次开发

H5-Editor是一个纯前端项目，基于 Vue2 开发、通过拖拽生成页面，类似于 易企秀、百度 H5等


### Demo

> [点击此处访问在线demo](https://a7650.github.io/h5-editor/#/)

                                                      

## Usage

```bash

git clone https://github.com/a7650/h5-editor.git

cd h5-editor

#如果你已经安装了nodejs，vue-cli等环境，可直接执行下列命令，否则需先安装环境

npm install

npm run dev

```

## 技术栈

主要基于Vue2，Element-ui（少部分使用），Vuex

## 编辑器主要功能

   - 元素自由拖拽，放大，缩小，旋转

   - 可添加图片，文本，矩形，背景。多种编辑功能（字体，背景，大小，边距等）

   - 组件自动吸附，实时参考线（组件可以和画布，自定义参考线以及其他组件进行自动吸附对齐，并显示实时参考线，拖动过程中按下alt键可暂时关闭）

   - 标尺，参考线，可自定义参考线（在标尺上点击即可生成参开线，可拖动参考线更改位置，双击删除参考线）

   - 撤销，重做（支持快捷键，可配置撤销的步数）

   - 组件复制，粘贴，锁定，隐藏等

   - ctrl + 拖动组件可快速复制组件

   - 右键菜单，菜单可配置，可针对组件当前状态灵活生成（即不同的组件可产生不同的菜单）

   - 图层面板，可拖拽更改组件图层，可重命名，可在图层面板快速锁定，删除，隐藏组件

   - 同时选中多组件（按ctrl + 左键），可进行多组件对齐

   - 数据备份，通过indexDB数据库保存在本地（可自动备份，手动备份），并可从备份中恢复数据

   - 一键生成h5代码

   - 编辑画布大小

   - 多种快捷键

   - 设置中心，可设置撤销功能，备份功能等

   - 针对开发人员具有插件系统，可通过插件系统二次开发，可参考plugins目录下的pluginA