徐烜 / bsth-ebus-h5_editor · Files

📖 Document | 📖简体中文

What's LuBan-H5?

LuBan-H5 is a mobile page builder based on Vue.js, which is similar with Amolink eqx(it's a chinese website, you may need to translate the page). It also supports parsing PSD file to HMTL5 Page

Demo

Preview Website

Links

• Documents

  • Chinese online document
  • English

• Source Code

  • GitHub: https://GitHub.com/ly525/luban-h5
  • Gitee(China Mirror)

• Community

  • Gitter
  • 吐个槽：For Chinese Users

• Ecosystem

  • back-end integration
    • Strapi.js(official Node.js backend API for luban-h5)
    • Spring Boot API Demo
  • Custom components
    • Rapid development of custom component scaffolding
  • official components library
    • Slide
    • Normal Button(different from form-button)
  • Support Component/Auxiliary Component
    • Image Gallery: For Quick Selection of images from the gallery
    • Text alignment-Repo(for Button text alignment)

Features

1. Editor

   • Reference Line/GuideLine
   • Adsorption Line
   • Change plugin shape by drag-and-drop
   • Edit Element (Canvas)
   • Copy Element (Canvas)
   • Delete Element (Canvas)
   • Edit Page
   • Copy Page
   • Delete Page
   • Quick Preview
   • Undo、Redo

2. Plugin System

- [x] Text
- [x] Normal Button
- [x] Form Button
- [x] Form Field
- [x] Picture
- [x] Background Image
- [x] Background Music
- [x] Video (Iframe format)

1. enhanced function

   • parsing PSD file to HTML Page
   • Photo Gallery
   • Third Party uncopyrighted Image Search

2. back-end API

   • create work
   • save work
   • update work
   • Form Statistics
   • Online Preview
   • QR Code Preview

---

Installs

proj: project root path please refer to: Document/Quick Start

---

More Explanation

Front-End Component Explanation

1. lbp-: lu-ban-plugin-, means Luban H5 plugin, location: proj/front-end/h5/src/components/plugins

Build With (current)

1. Front end: Vue.js
2. Back End: Strapi
3. Storage: Sqlite

Read more here Online English Document