lovely-kids-garden / h5-editor

一款模仿易企秀制作的编辑器

h5-editor

一款仿易企秀的h5编辑器,此项目还在持续开发中。这也是人生中第五个编辑器了，也是第一个使用VUE制作的作品。这里你会学到面向对象编程，设计模式，TDD。博客地址

预览

Install

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

开发计划

编辑器部分

• 拖拉拽，旋转，大小，位置
• 组件单选多选
• 组件复制，黏贴
• 组件拖拽过程中自动吸附其他组件
• 多选组件的情况下，排序对齐。包括左对齐，上对齐，右对齐，下对齐，垂直居中对齐，水平居中对齐，垂直均分，水平均分
• 组件常用样式编辑，阴影编辑，这里要引入多个UI库，甚至要自己写UI库，有点蛋疼

• 按钮
• 属性面板
• 拖拽指令gls-dragable
• 页签
• 手风琴
• 颜色选择器
• 滑动条
• 下拉框
• 弹出框
• 单选框
• 复选框
• 单行文本框
• 多行文本框
• 数字步增
• tooltip

• 组件动画编辑
• 场景编辑

• 新建场景
• 删除场景
• 复制场景
• 场景拖拽排序
• 场景名称编辑

• 增加背景编辑
• 增加图片组件
• 增加图片素材管理器
• 文本双击之后的内容编辑
• 增加音频组件
• 增加音频素材管理
• 吸附效果可视化，可配置化
• 整合引擎，实现预览
• 撤销，恢复
• 实现页面模板

引擎部分

• 项目内容的读取
• 读取场景数据并渲染
• 预加载场景数据
• 引入swiper实现滑动换页 。。。