H5-Editor
Visual operation, drag and drop to generate pages, export html files
It has an editor plug-in system for developers, supports inheritance from existing projects, and supports secondary development.
H5-Editor is a pure front-end project, developed based on Vue2, and generates pages through drag and drop, similar to Yiqixiu, Baidu H5, etc.
Demo
Click here to access the online demo
Usage
git clone https://github.com/a7650/h5-editor.git
cd h5-editor
#如果你已经安装了nodejs，vue-cli等环境，可直接执行下列命令，否则需先安装环境
npm install
npm run dev
technology stack
Mainly based on Vue2, Element-ui (used in a small amount), Vuex
Editor main functions
- Elements can be dragged, enlarged, reduced and rotated freely
- Pictures, text, rectangles, and backgrounds can be added. Multiple editing features (font, background, size, margins, etc.)
- Automatic adsorption of components and real-time guides (components can be automatically adsorbed and aligned with the canvas, custom guides and other components, and display real-time guides. Press the alt key during dragging to temporarily close)
- Ruler, reference line, customizable reference line (click on the ruler to generate a reference line, drag the reference line to change its position, double-click to delete the reference line)
- Undo, redo (supports shortcut keys, configurable number of undo steps)
- Component copy, paste, lock, hide, etc.
- ctrl + drag components to quickly copy components
- Right-click menu, the menu is configurable and can be flexibly generated according to the current status of the component (that is, different components can generate different menus)
- The layer panel allows you to drag and drop component layers, rename them, and quickly lock, delete, and hide components in the layer panel.
- Select multiple components at the same time (press ctrl + left click) to align multiple components
- Data backup is saved locally through the indexDB database (automatic backup and manual backup are available), and data can be restored from the backup.
- Generate h5 code with one click
- Edit canvas size
- Various shortcut keys
- Setting center, you can set the undo function, backup function, etc.
- There is a plug-in system for developers, which can be used for secondary development. Please refer to pluginA in the plugins directory.
