본문으로 건너뛰기

데이터 처리

Editor 위젯은 실시간 업데이트, 유효성 검사, 사용자 주도 저장 작업 등 동적 데이터 처리를 지원합니다. 개발자는 데이터 일관성과 사용자 상호 작용에 대한 애플리케이션의 요구사항에 맞게 Editor 위젯의 동작을 커스터마이즈할 수 있습니다.

변경 시 자동으로 데이터 저장​

Editor 위젯은 변경이 발생할 때마다 자동 데이터 저장을 트리거할 수 있습니다. 이는 주기적인 사용자 상호 작용이 보장되지 않거나, 수동 저장 작업을 최소화하는 것이 우선순위인 시나리오에서 유용합니다.

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

<template>
   <Editor :items="items" :autoSave="true" />
</template>

autoSave 속성을 true로 설정하면 모든 변경 사항이 자동으로 저장되어, 사용자가 명시적으로 저장 작업을 수행할 필요성이 줄어듭니다.

자동 저장 비활성화 및 수동 사용자 작업 요구​

Editor 위젯은 자동 저장을 비활성화하여 사용자가 변경 사항을 명시적으로 저장하도록 요구하는 기능을 지원합니다. 이는 저장 전에 사용자 확인이나 검토가 필요한 워크플로에 적합합니다.

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

<template>
   <Editor :items="items" :autoSave="false" />
</template>

autoSave를 false로 설정하면 자동 저장이 방지되어, 사용자가 데이터가 저장되는 시점을 제어할 수 있습니다.

Editor 데이터 변경 감지​

Editor 위젯은 데이터에 적용된 변경 사항에 대한 상세 정보를 제공합니다. 이는 수정 사항을 추적하거나, 커스텀 로직을 구현하거나, 저장되지 않은 변경 사항을 강조 표시하는 데 유용합니다.

interface OnChangeResult {
   key: string;
   value: any;
   update: Record<string, any>;
}
<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" }
   ];

   function onchange(ev: OnChangeResult) {
      console.log(`field ${ev.key} was changed to ${ev.value}`);
      console.log("all not saved changes", ev.update);
   }
</script>

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

onchange event handler는 필드 key, 업데이트된 값, 저장되지 않은 모든 변경 사항의 맵을 제공합니다. 이를 통해 수정 사항을 세밀하게 추적할 수 있습니다.

사용자 주도 저장 작업 감지​

Editor 위젯은 사용자가 명시적으로 데이터 저장을 요청하는 시점을 감지할 수 있습니다. 이는 폼 제출이나 변경 사항 확인 등 사용자 작업에 의존하는 워크플로를 구현하는 데 유용합니다.

interface OnSaveResult {
   changes: string[];
   values: Record<string, any>;
}
<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" }
   ];

   function onsave(ev: OnSaveResult) {
      console.log("changed values", ev.changes);
      console.log("latest data snapshot", ev.values);
   }
</script>

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

onsave event handler는 변경된 필드와 현재 데이터 상태에 대한 정보를 제공합니다.

데이터의 유효성 검사 상태 감지​

Editor 위젯은 유효성 검사 결과를 모니터링하여 데이터가 유효한지 또는 오류가 포함되어 있는지에 대한 피드백을 제공합니다. 이는 저장 전에 데이터 무결성을 보장하는 데 유용합니다.

interface OnValidationResult {
   errors: {
      [key: string]: {
        errorType: "validation" | "required";
      };
   };
   values: Record<string, any>;
}
<script setup>
   import { Editor } from "@svar-ui/vue-editor";

   const items = [
      {
        comp: "text",
        key: "name",
        label: "Name",
        validation: v => (v && v.length > 5),
        validationMessage: "Name must be longer than 5 characters",
        required: true
      },
      { comp: "textarea", key: "descr", label: "Description" },
      { comp: "checkbox", key: "admin", label: "Is Admin" }
   ];

   function onvalidation(ev: OnValidationResult) {
      if (Object.keys(ev.errors).length > 0) {
        for (const key in ev.errors) {
           if (ev.errors[key].errorType === "required") {
              console.log(`"${key}" is required but missing`);
           } else if (ev.errors[key].errorType === "validation") {
              console.log(`"${key}" failed a custom validation rule`);
           }
        }
      } else {
        console.log("validation is ok");
      }

      console.log("latest data snapshot", ev.values);
   }
</script>

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

onvalidation event handler는 현재 데이터 상태와 유효성 검사 오류를 제공합니다. 유효성 검사에 실패한 필드를 식별하고 데이터가 사전 정의된 요구사항을 충족하는지 확인하는 데 도움이 됩니다.

필드를 필수로 표시​

Editor 위젯은 특정 필드를 필수로 표시할 수 있습니다. 이를 통해 사용자가 해당 필드를 비워 둘 수 없도록 하여 필수 데이터 입력을 강제합니다.

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

   const items = [
      {
        comp: "text",
        key: "name",
        required: true,
      },
   ];
</script>

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

required 속성을 true로 설정하면 해당 필드가 필수가 됩니다. 사용자는 계속 진행하기 전에 값을 입력해야 합니다.

필드에 대한 유효성 검사 규칙 정의​

Editor 위젯은 필드에 대한 커스텀 유효성 검사 규칙 정의를 지원합니다. 이를 통해 사용자 입력이 형식이나 값 범위와 같은 특정 기준을 준수하도록 보장합니다.

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

   const items = [
      { comp: "text", key: "name", label: "Name",
        validation: val => {
          const regEx = /^[a-zA-Z]+$/;
           return val && regEx.test(val);
        },
        validationMessage: "wrong name format"
      },
   ];
</script>

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

validation 속성은 필드 값을 검사하는 함수를 정의하고, validationMessage는 유효성 검사에 실패했을 때 표시할 오류 메시지를 지정합니다. 이를 통해 입력 요구사항을 정밀하게 제어할 수 있습니다.

관련 샘플: