tefact

# ⚠️ Warning

This project is not maintain. You can check our new version Low-Code Editor in [staringos/mtbird](https://github.com/staringos/mtbird)
<br />
这个项目将不在维护，您可以查看我们的新版本开源低代码编辑器 [staringos/mtbird](https://github.com/staringos/mtbird)

<br />
<br />
<br />

<div align="center">
  <img src="./docs/assets/images/logo-banner-2.png">
</div>
<div align="center">
  <a href="https://staringos.com">Website</a> | 
  <a href="http://saas.staringos.com">Usage</a> | 
  <a href="https://staringos.com/docs">Documents</a> | 
  <a href="https://github.com/staringos/tefact-example">Example</a> | 
  <a href="https://staringos.com/docs/join-us">Community</a> | 
  <a href="https://staringos.com/docs/join-us">Support</a>
</div>

<br />

<div align="center">

[![license](https://img.shields.io/badge/license-MIT-brightgreen.svg?style=flat)](https://github.com/Tefact/tefact-saas)
[![Release Version](https://img.shields.io/badge/release-0.0.1-green.svg)](https://github.com/Tefact/tefact-saas/releases)
[![Total alerts](https://img.shields.io/lgtm/alerts/g/Tefact/tefact-saas.svg?logo=lgtm&logoWidth=18)](https://lgtm.com/projects/g/Tefact/tefact-saas/alerts/)
[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/Tefact/tefact-saas/pulls)
[![Community](https://img.shields.io/discord/733027681184251937.svg?style=flat&label=Join%20Community&color=7289DA)](https://discord.gg/7V5vnHW2)

</div>

# Tefact

Lightweight no-code editor for `website`、`H5 page` and `Form`. Build your application without code!

<a href="./README-CN.md">[中文文档]</a>

<a href="https://github.com/staringos/tefact-example">[Example]</a>

<img src="./docs/assets/images/show.gif" align="center">

Dependencies:

- [Vue 2.x](https://github.com/vuejs/vue)
- [ElementUI](https://github.com/ElemeFE/element)
- [Sass](https://github.com/sass/sass)

## Getting Start

Recommend: Fork [example project](https://github.com/staringos/tefact-example) to getting start. or manually import:

1. Install dependency:

```shell script
yarn add @tefact/editor
```

2. Import styles to your css or less file:

```vue
import "@tefact/editor/lib/index.css"
```

3. Add `@tefact` package to your webpack transport.

`webpack.config.js` or `nuxt.config.js`

```json
{
    "build": {
        "transpile": [
          /@tefact\/*/
        ],
    }
}
```

4. Import Editor to you.

```vue
<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>
```

## Core Concept

### Target

Target is an object that we edit for. It can be a H5 Page / Form Page or website Page. It's a JSON data structure for descript how a Page for Form looks like.

You can use `getDefaultFeature` in `@tefact/editor