Skip to content

Latest commit

 

History

History
172 lines (125 loc) · 4.55 KB

README-CN.md

File metadata and controls

172 lines (125 loc) · 4.55 KB

license Actions Status Release Version PRs Welcome Total alerts

Tefact Engine Community

星搭开源无代码编辑器,使用图形化界面生成 网站、H5和表单. 无需任何代码生成应用程序!

[English Docs]

[开发Demo]

依赖:

开始使用

推荐: 使用 案例项目 开始. 或者手动引入:

  1. 安装依赖
yarn add @tefact/editor
  1. 引入样式文件
import "@tefact/editor/lib/index.css"
  1. 引入并使用编辑器组件.
<template>
  <Editor
    :value="target"
    :editorSetting="editorSetting"
  ></Editor>
</template>
<script lang="ts">
import Vue from "vue";
import Editor, { getDefaultFeature } from "@tefact/editor";

export default Vue.extends({
  data() {
    return {
      target: getDefaultFeature("page"),
      editorSetting: {}
    }
  },
  components: {
    Editor
  }
})
</script>

核心概念

Target 编辑目标

Target 是你所编辑和存储的对象,可以是一个网页、H5或者表单. 他是一套JSON数据结构描述展示内容、样式和使用数据。

您可以使用 @tefact/editor 中的 getDefaultFeature 去生成默认的 Target 数据。编辑器经过编辑后,会修改对应的数据,您所需要做的就是把它保存起来,供下次调用使用。每个 Target 都有一个 featureType 属性,标识当前 Target 的类型。将 Target 可以引入 @tefact/feature-form@tefact/feature-page 中,可以展示其内容。

Editor 编辑器

@tefact/editor 是一个界面编辑器,用来提供给用户编辑 Target 的展示内容和样式信息

参数

  • value: 正在编辑的 Target 对象
  • editorSetting: 编辑器设置

Event 事件

  • editTarget: 当 Target 被修改后调用
  • share: 当分享按钮被点击时调用
  • save: 当保存按钮被点击时调用
  • back: 返回按钮被点击时调用

Page 页面

@tefact/feature-page 是一个查看组件,用来查看 featureType = pagetarget 对象. 使用案例:

<template>
  <Page :value="target"></Page>
</template>
<script lang="ts">
import Vue from "vue";
import Page, { DFFAULT } from "@tefact/feature-page";

export default Vue.extends({
  data() {
    return {
      target: DFFAULT
    }
  },
  components: {
    Page
  }
})
</script>

Form 表单

page 一样, @tefact/feature-form 也是一个预览组件,用来查看或预览 featureType = form 的 Target, 您可以:

<template>
  <Form :value="target"></Form>
</template>
<script lang="ts">
import Vue from "vue";
import Form, { DFFAULT } from "@tefact/feature-page";

export default Vue.extends({
  data() {
    return {
      target: DFFAULT
    }
  },
  components: {
    Form
  }
})
</script>

贡献代码

优秀的开源社区需要大家的共同努力,欢迎 PRs 和 Issues.

CONTRIBUTING

加入社区

微信扫码加入星搭微信群:

Discord

Community