# h5-editor

**Repository Path**: zhugqiang/h5-editor

## Basic Information

- **Project Name**: h5-editor
- **Description**: 一款模仿易企秀制作的编辑器
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2023-10-11
- **Last Updated**: 2023-10-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# h5-editor

> 一款仿易企秀的h5编辑器,此项目还在持续开发中。这也是人生中第五个编辑器了，也是第一个使用VUE制作的作品。这里你会学到面向对象编程，设计模式，TDD。[博客地址](http://www.cnblogs.com/geilishu/p/7677949.html)

## 预览
<img src="readme/preview.gif"/>


## Install

    npm install
    npm run mock
    打开另一个CMD
    npm run start

## 开发计划

### 编辑器部分
* <img src="readme/right24x24.png"/>拖拉拽，旋转，大小，位置
* <img src="readme/right24x24.png"/>组件单选多选
* <img src="readme/right24x24.png"/>组件复制，黏贴
* <img src="readme/right24x24.png"/>组件拖拽过程中自动吸附其他组件
* <img src="readme/right24x24.png"/>多选组件的情况下，排序对齐。包括左对齐，上对齐，右对齐，下对齐，垂直居中对齐，水平居中对齐，垂直均分，水平均分
* <img src="readme/right24x24.png"/>组件常用样式编辑，阴影编辑，这里要引入多个UI库，甚至要自己写UI库，有点蛋疼
>* <img src="readme/right24x24.png"/>按钮
>* <img src="readme/right24x24.png"/>属性面板
>* <img src="readme/right24x24.png"/>拖拽指令gls-dragable
>* <img src="readme/right24x24.png"/>页签
>* <img src="readme/right24x24.png"/>手风琴
>* <img src="readme/right24x24.png"/>颜色选择器
>* <img src="readme/right24x24.png"/>滑动条
>* <img src="readme/right24x24.png"/>下拉框
>* <img src="readme/right24x24.png"/>弹出框
>* <img src="readme/right24x24.png"/>单选框
>* <img src="readme/right24x24.png"/>复选框
>* <img src="readme/right24x24.png"/>单行文本框
>* <img src="readme/right24x24.png"/>多行文本框
>* <img src="readme/right24x24.png"/>数字步增
>* <img src="readme/right24x24.png"/>tooltip
* <img src="readme/right24x24.png"/>组件动画编辑
* 场景编辑
>* <img src="readme/right24x24.png"/>新建场景
>* <img src="readme/right24x24.png"/>删除场景
>* <img src="readme/right24x24.png"/>复制场景
>* <img src="readme/right24x24.png"/>场景拖拽排序
>* <img src="readme/right24x24.png"/>场景名称编辑
* <img src="readme/right24x24.png"/>增加背景编辑
* <img src="readme/right24x24.png"/>增加图片组件
* <img src="readme/right24x24.png"/>增加图片素材管理器
* 文本双击之后的内容编辑
* 增加音频组件
* 增加音频素材管理
* 吸附效果可视化，可配置化
* 整合引擎，实现预览
* 撤销，恢复
* 实现页面模板
### 引擎部分
* 项目内容的读取
* 读取场景数据并渲染
* 预加载场景数据
* 引入swiper实现滑动换页
。。。