본문으로 건너뛰기

설치 및 초기화

설치​

Vue Editor 라이브러리를 설치하려면 다음 명령어를 실행하세요:

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

//yarn
yarn add @svar-ui/vue-editor

초기화​

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

Editor 위젯 초기화​

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

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

<script setup>
   import { Editor } from "@svar-ui/vue-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>

<template>
  <Editor :items="items" :values="values" />
</template>

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

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

<script setup>
   import { Editor } from "@svar-ui/vue-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>

<template>
  <Editor :items="items" :values="values" :readonly="true" />
</template>

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

readonly

전체 초기화 코드​

위젯의 동작을 확인하려면 위젯에 항목을 추가하세요.

<script setup>
  import { Editor, Willow } from "@svar-ui/vue-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>

<template>
  <Willow>
    <Editor :items="items" :values="values" />
  </Willow>
</template>
노트

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

비주얼 테마​

위젯은 테마 태그로 제어되는 Light와 Dark 두 가지 비주얼 스타일로 제공됩니다.

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

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

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