Giter Site home page Giter Site logo

a7650 / h5-editor Goto Github PK

View Code? Open in Web Editor NEW
713.0 15.0 151.0 4.48 MB

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

Home Page: https://a7650.github.io/h5-editor/#/

License: MIT License

JavaScript 45.44% HTML 0.30% Vue 50.44% CSS 1.30% SCSS 2.39% TypeScript 0.13%
vue vuejs2 element-ui h5editor poster javascript plugins drag buider

h5-editor's Introduction

H5-Editor

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

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

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

Demo

点击此处访问在线demo

Usage

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

h5-editor's People

Contributors

a7650 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

h5-editor's Issues

bug

  • 在文本输入框内按回车后保存,会出现重复的文本

  • 快捷键复制时报错

  • 存在styleFilter的组件生成h5代码后无法准确还原style的问题

  • 存在复制的组件时,备份报错

  • 更改参考线位置时,参考线top位置错误

  • 备份时未备份canvasSize

  • 生成html代码时,可优化style,精简最终文件的体积

  • 图片背景 和 普通组件的active状态切换问题

  • 纯色背景未完全填充main-panel

  • ~~矩形在设置了borderRadius的情况下导出图片时图像还原不准确

计划功能

计划功能

  • 组件拖拽,旋转,缩放

  • 添加组件基础框架实现

  • 组件control,组件control基础框架实现

  • 组件父类Widget实现,增加基础mixins,基础config,组件锁定,隐藏,删除,init等基础功能

  • 图片类ImageWidget

  • 添加图片自动适配大小

  • 背景类BackgroundWidget,有纯色背景和图片背景,纯色背景不可拖动,旋转,缩放,图片背景无限制

  • 文本类TextWidget

  • 增加文本编辑,文本control:文本样式,边框,背景自定义编辑

  • 矩形类RectWidget,矩形绘制类DrawRectWidget

  • 增加矩形绘制,矩形control:矩形边框,背景,弧度自定义编辑

  • 右键菜单,Widget类增加基础菜单命令,组件自定菜单命令,基础菜单命令配置,command执行机制,invokeFunctionMap配置

  • 图层面板

  • 图层管理,图层item重命名,图层item添加常用命令(删除,锁定/解锁,隐藏)

  • 图层item拖拽调整层级

  • 图层面板推拽调整位置

  • 组件复制粘贴

  • ctrl + 拖动 快速复制

  • 组件组合,取消组合

  • 快捷键复制粘贴删除

  • 参考线、标尺

  • 拖拽过程实时参考线,自动吸附

  • 锁定纵横比

  • 图片处理

  • 操作撤销

  • 更改画布size

  • 清空画布

  • ctrl选中多个组件

  • 多组件移动,对齐

  • 编辑器数据备份

  • 生成html文件

  • 生成图片

  • 独立打包成一个可以调用的模块

修改尺寸再次拖拽位置显示异常

通过右侧“位置尺寸”面板修改宽度和高度,再次拖动右下角后位置与鼠标移动位置不一致,但是通过取消激活后再次激活,位置就显示正常了。

H5编辑器的后续开发还会有吗?

你好开发者,H5编辑器的后续开发还会有吗?提供二次开发的服务吗?
可以通过微信或QQ联系你吗?方便的话加下我
微信 don_139 QQ 1918007008

参考线有些问题

现在的参考线让人比较迷糊,组件多了以后不知道参考的哪个。。
感觉processon这种更合理
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.