/lego-editor

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

Primary LanguageVue

乐高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~