Skip to content
This repository has been archived by the owner on Jun 18, 2024. It is now read-only.
/ lego-editor Public archive

乐高 H5 编辑器是一个灵活、强大、低心智成本的 H5 页面编辑器。

Notifications You must be signed in to change notification settings

Lionad-Morotar/lego-editor

Repository files navigation

乐高H5编辑器

lerna


正在使用新技术栈重写项目,依旧是以低心智为首要目标。新项目@p-ray/blocks将作为@p-ray的一部分。

欢迎移步P射线


乐高H5编辑器是一款基于 Vue 的可视化搭建编辑器。与常见开源页面编辑器的最大的不同是,乐高H5使用开发约定而不是数据结构约定(JSON Schema)编写模板,可以最大程度减少心智成本,降低编写模块以及调试时的复杂度。乐高H5并不关心你在编写模块时用不用 TypeScript 或者写了哪些业务逻辑,你只需正常编写 Vue 组件,它会自动帮你处理编辑时和渲染时一系列恼人问题,比如编辑时禁用点击、模块可设置的最大圆角可动态根据组件高度调整等等

举个例子,编写文本区域模块,只需要以下几行代码(同时你会发现这就是一个非常普通的 Vue 组件)。

<template>
  <div class="m-textarea" :style="styles">{{ text.text }}</div>
</template>

<script>
import Props from 'wox-props'
export default {
  name: 'm-textarea',
  props: {
    text: Props.textarea({
      label: '文本内容',
      default: {
        text: 'Elpsy Congroo Voluptate cillum ullamco ea occaecat.',
        fontSize: 12,
        lineHeight: 1.6,
        color: '#666'
      }
    })
  },
  computed: {
    styles () {
      return Props.genStyles(this.text)
    }
  }
}
</script>

<style lang="scss" scoped>
.m-textarea {
  word-break: break-all;
  white-space: break-spaces;
}
</style>

项目结构

  • segments:页面逻辑结构拆分。整个编辑器划分为导航头部、左侧模块预览面板、屏幕(或画布)、右侧编辑面板结构,分别对应 header、left-panel、screen、right-panel 这四个子文件夹。
  • forms:右侧编辑面板区域使用到的动态表单(及规范)。
  • modules:模块文件,每一个文件夹对应一个模块(TODO index.js 会自动导出所有模块)。
  • models:开发乐高H5的模块需要遵循的约定。module.js、props.js,分别对模块运行时数据及模块编写规范做了约定。

开发环境

cnpm install
cnpm run serve

功能规划

  • 模块能力(内置模块、自定义模块、模块组合事件系统动画系统依赖机制
  • 屏幕交互(快捷键、拖拽、吸附、栅格
  • 数据能力(序列化输出、撤销重做)
  • 页面预览功能
  • 后端服务
  • 网站及文档

需要协助

如果有任何想法,欢迎 Issue 以及 PR~