본문으로 건너뛰기

시작하기

이 페이지에서는 Svelte 애플리케이션에서 SVAR Svelte Editor 컴포넌트를 시작하는 방법을 설명합니다.

1단계. 패키지 설치​

테마를 제공하는 editor 패키지와 core UI 라이브러리를 설치합니다:

npm install @svar-ui/svelte-core
npm install @svar-ui/svelte-editor

또는 yarn을 사용하는 경우:

yarn add @svar-ui/svelte-core
yarn add @svar-ui/svelte-editor
note

패키지가 wx-svelte-editor에서 @svar-ui/svelte-editor로 마이그레이션되었습니다. Svelte SVAR 3.0 업데이트 전까지는 wx-svelte-editor를 계속 게시합니다.

2단계. 에디터 초기화​

Editor 컴포넌트를 import하고 기본 스타일을 적용하기 위해 Willow 테마로 감쌉니다:

<script>
  import { Willow } from '@svar-ui/svelte-core';
  import { Editor } from '@svar-ui/svelte-editor';
</script>

<Willow>
  <Editor />
</Willow>

Willow는 모든 SVAR 위젯에 필요한 스타일을 추가합니다. 애플리케이션의 최상위 레벨에 적용하세요. 없으면 Editor에 스타일이 적용되지 않아 수동으로 추가해야 합니다.

3단계. 폼 필드 추가​

실제 폼을 표시하려면 items 배열(필드 정의)과 values 객체(초기 데이터)를 에디터에 전달합니다:

<script>
  import { Editor, Willow } from "@svar-ui/svelte-editor";

  const items = [
    { comp: "text", key: "name", label: "Name" },
    { comp: "text", key: "descr", label: "Description" },
    { comp: "text", key: "role", label: "Role" }
  ];

  const values = {
    name: "John Doe",
    descr: "Lorem ipsum dolor sit amet",
    role: "admin"
  };
</script>

<Willow>
  <Editor {items} {values} />
</Willow>

items의 각 항목은 필드를 정의합니다. comp는 컨트롤 유형을, key는 values의 해당 값과 연결하고, label은 표시 텍스트를 설정합니다.

노트

올바른 초기화를 위해 애플리케이션의 최상위 레벨에 테마를 적용하는 것을 권장합니다. Editor 컴포넌트를 단독으로 사용하는 경우 반드시 테마로 감싸야 합니다(위 예제에서는 Willow 테마가 적용됩니다).

다음 단계​

이제 폼 필드가 있는 동작하는 에디터가 준비되었습니다. 여기서 표시 모드 구성, 유효성 검사 추가, 툴바 커스터마이징 또는 다크 테마 전환을 진행할 수 있습니다.