본문으로 건너뛰기

설치 및 초기화

설치​

Svelte Editor 라이브러리를 설치하려면 다음 명령어를 실행하십시오:

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

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

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

초기화​

Editor 위젯은 유연한 초기화 옵션을 제공하여 개발자가 입력 필드를 정의하고, 초기값을 미리 설정하며, 위젯을 편집 가능 또는 읽기 전용 모드로 설정할 수 있습니다. 다양한 사용 사례에 맞게 폭넓은 구성을 지원합니다.

Editor 위젯 초기화​

Editor에는 "text", "textarea", "checkbox", "section", "readonly"가 내장 컨트롤로 포함되어 있습니다.

다른 컨트롤을 사용하려면 @svar-ui/svelte-core 라이브러리에서 가져온 후 registerEditorItem helper를 사용하여 Editor items로 등록해야 합니다:

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

   const items = [
      { comp: "text", key: "name", label: "Name" },
      {
        comp: "textarea",
        key: "descr",
        label: "Description"
      },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];

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

<Editor {items} {values} />

이 예제는 입력 필드 목록과 해당 초기값으로 Editor 위젯을 초기화하는 방법을 보여줍니다. items 배열은 폼의 구조를 정의하며, 각 객체는 입력 타입(comp), 고유 키(key), 사용자 친화적인 레이블(label)을 지정합니다. values 객체는 키를 기준으로 각 입력 필드의 초기값을 제공합니다. 이 설정은 기존 레코드를 편집하는 경우처럼 데이터가 미리 채워진 기본 폼을 만들 때 유용합니다.

읽기 전용 모드로 Editor 위젯 초기화​

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

   const items = [
      { comp: "text", key: "name", label: "Name" },
      {
        comp: "textarea",
        key: "descr",
        label: "Description",
      },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];
   const values = {
      name: "John Doe",
      descr: "Lorem ipsum dolor sit amet",
      admin: true,
      role: "admin"
   };
</script>

<Editor {items} {values} readonly={true} />

이 예제는 Editor 위젯을 읽기 전용 모드로 초기화하는 방법을 보여줍니다. readonly 속성을 true로 설정하면 사용자가 입력 필드를 수정할 수 없게 됩니다. items 배열과 values 객체는 편집 가능 모드와 동일한 방식으로 정의됩니다. 이 구성은 검토 또는 감사 인터페이스처럼 폼 데이터를 편집 없이 표시해야 하는 경우에 적합합니다.

readonly

전체 초기화 코드​

위젯이 동작하는 모습을 보려면 위젯에 몇 가지 items를 추가하십시오.

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

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

시각적 테마​

위젯은 테마 태그로 제어되는 Light와 Dark 두 가지 시각적 스타일을 제공합니다.

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

<!-- Light -->
<Willow>
  <Editor />
</Willow>

<!-- Dark -->
<WillowDark>
  <Editor />
</WillowDark>