tefact

️ 경고

이 프로젝트는 유지 관리되지 않습니다. staringos/mtbird에서 새 버전의 Low-Code Editor를 확인할 수 있습니다.
이 프로젝트는 더 이상 유지되지 않습니다. 오픈 소스 로우 코드 편집기 staringos/mtbird의 새 버전을 확인할 수 있습니다.

웹사이트 | 사용 사례 | 커뮤니티 |

테팩트

website , H5 page 및 Form 위한 경량 노코드 편집기. 코드 없이 애플리케이션을 구축하세요!

[중국 문서]

[예]

종속성:

• 뷰 2.x
• 요소UI
• 사스

시작하기

권장 사항: 시작하려면 예제 프로젝트를 포크하거나 수동으로 가져오세요.

1. 설치 종속성:

yarn add @tefact/editor

2. CSS 이하의 파일로 스타일을 가져옵니다.

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

3. 웹팩 전송에 @tefact 패키지를 추가하세요.

webpack.config.js 또는 nuxt.config.js

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

4. 편집기를 당신에게 가져옵니다.

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

핵심 개념

목표

대상은 우리가 편집하는 개체입니다. 이는 H5 페이지/양식 페이지 또는 웹 사이트 페이지일 수 있으며 양식 페이지의 모양을 설명하는 JSON 데이터 구조입니다.

@tefact/editor 에서 getDefaultFeature 사용하여 기본 대상 데이터를 생성하고 어딘가에 저장할 수 있으며, @tefact/feature-form 또는 @tefact/feature-page 에서 직접 사용할 수 있습니다.

편집자

@tefact/editor 기능 페이지 또는 양식에 대한 편집 보기입니다.

매개변수

• 값: 편집 대상
• editorSetting: 편집기 설정

이벤트

• addTarget: 편집기 내에서 대상 추가
• editTarget : 에디터 타겟 기본정보 이후
• 공유: 타겟 공유 전환
• 저장: 대상을 저장할 때
• 뒤로: 편집기 내의 편집기가 뒤로 전환될 때

페이지

@tefact/feature-page featureType = page 있는 target 에 대한 보기 구성 요소입니다.

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

형태

page 와 마찬가지로 @tefact/feature-form 미리보기에 사용되거나 해당 대상에 featureType = form 있는 것을 표시합니다. 다음을 수행할 수 있습니다.

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

기여

PR 및 이슈는 모두 환영합니다. 자유롭게 질문하거나 코드를 제출해 주세요.

기여

커뮤니티 가입

wechat으로 스캔하고 우리 그룹에 가입하세요.

불화