tefact

️ Warning

This project is not maintain. You can check our new version Low-Code Editor in staringos/mtbird
This project will no longer be maintained, you can check out our new version of the open source low-code editor staringos/mtbird

Website | Usage | Documents | Example | Community | Support

Tefact

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

[Chinese document]

[Example]

Dependencies:

• Vue 2.x
• ElementUI
• Sass

Getting Started

Recommend: Fork example project to getting start. or manually import:

1. Install dependency:

yarn add @tefact/editor

2. Import styles to your css or less file:

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

3. Add @tefact package to your webpack transport.

webpack.config.js or nuxt.config.js

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

4. Import Editor to you.

< 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 to generate default target data. And save it to somewhere, it can be used directly to @tefact/feature-form or @tefact/feature-page

Editor

@tefact/editor is an Edit view for feature page or form.

Parameters

• value: the edit target
• editorSetting: Setting of editor

Event

• addTarget: Add target within the editor
• editTarget: after editor target basic information
• share: toggle target share
• save: When save target
• back: When editor within the editor back toggle

Page

@tefact/feature-page is a view component for those target has a featureType = page . To preview a page, you can do:

< 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

Same like page , @tefact/feature-form is use for preview or display those target has a featureType = form , you can do:

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

Contributing

PRs & Issues are all welcome, feel free to ask questions or submit your code.

CONTRIBUTING

Join Community

Scan with wechat, join our group.

Discord