입력 컨트롤 렌더링

필드 렌더링

Editor 위젯은 다양한 입력 컨트롤을 렌더링하는 기능을 제공합니다. 이 컨트롤에는 기본 입력 유형, 고급 컴포넌트, 댓글 및 작업 목록과 같은 특수 위젯이 포함됩니다. 각 컨트롤은 특정 사용 사례에 맞게 레이블, 키 및 추가 속성으로 커스터마이징할 수 있습니다.

Editor에서 색상 선택 컨트롤 렌더링

@svar-ui/vue-core에서 ColorSelect 컨트롤을 가져와 Editor 항목으로 등록합니다:

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

  registerEditorItem("colorselect", ColorSelect);

  const items = [
    {
      comp: "colorselect",
      key: "name",
      label: "Name"
    }
  ];
</script>

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

색상 선택기 컨트롤을 사용하면 그래픽 인터페이스를 통해 색상을 선택할 수 있습니다. 테마 커스터마이징이나 카테고리에 색상 지정과 같이 사용자가 색상을 정의해야 하는 경우에 적합합니다.

Editor에서 Date Picker 컨트롤 렌더링

@svar-ui/vue-core에서 DatePicker 컨트롤을 가져와 Editor 항목으로 등록합니다:

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

  registerEditorItem("datepicker", DatePicker);

  const items = [
    {
      comp: "datepicker",
      key: "name",
      label: "Name"
    }
  ];
</script>

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

날짜 선택기 컨트롤을 사용하면 캘린더 인터페이스에서 날짜를 선택할 수 있습니다. 일정 관리, 마감일 설정 또는 날짜와 관련된 입력이 필요한 경우에 유용합니다.

Editor에서 라디오 버튼 렌더링

@svar-ui/vue-core에서 RadioButtonGroup 컨트롤을 가져와 Editor 항목으로 등록합니다:

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

  registerEditorItem("radio-group", RadioButtonGroup);

  const items = [
    {
      comp: "radio-group",
      key: "name",
      label: "Name",
      options: [
        {
          value: "s",
          label: "Scorpions",
        },
        {
          value: "m",
          label: "Muse",
        },
      ]
    }
  ];
</script>

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

라디오 버튼은 하나만 선택할 수 있는 여러 옵션을 사용자에게 제공할 때 사용합니다. 환경 설정이나 카테고리 선택과 같은 시나리오에 적합합니다.

Editor에서 읽기 전용 블록 렌더링

이 컨트롤은 추가 등록이 필요 없는 기본 내장 컨트롤입니다.

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

  const items = [
    {
      comp: "readonly",
      key: "name",
      label: "Name"
    }
  ];
</script>

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

읽기 전용 블록은 편집할 수 없는 정적 정보를 표시하기 위해 설계되었습니다. 사전 정의된 데이터나 시스템에서 생성된 데이터를 표시하는 데 유용합니다.

Editor에서 Rich Select 컨트롤 렌더링

@svar-ui/vue-core에서 RichSelect 컨트롤을 가져와 Editor 항목으로 등록합니다:

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

  registerEditorItem("select", RichSelect);

  const items = [
    {
      comp: "select",
      key: "name",
      label: "Name",
      options: [
        { id: 1, label: "High", color: "#DF282F" },
        { id: 2, label: "Medium", color: "#FFC975" },
        { id: 3, label: "Low", color: "#65D3B3" },
      ]
    }
  ];
</script>

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

Rich Select 컨트롤을 사용하면 더 나은 시각화를 위해 색상이나 아이콘 같은 추가 속성과 함께 옵션 목록에서 선택할 수 있습니다. 우선순위 선택이나 분류에 적합합니다.

Editor에서 Slider 컨트롤 렌더링

@svar-ui/vue-core에서 Slider 컨트롤을 가져와 Editor 항목으로 등록합니다:

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

  registerEditorItem("slider", Slider);

  const items = [
    {
      comp: "slider",
      key: "name",
      label: "Name"
    }
  ];
</script>

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

슬라이더 컨트롤은 사전 정의된 범위 내에서 값을 선택하는 데 사용됩니다. 볼륨, 밝기 또는 평점 시스템과 같은 설정에 일반적으로 사용됩니다.

Editor에서 편집 가능한 텍스트 컨트롤 렌더링

이 컨트롤은 추가 등록이 필요 없는 기본 내장 컨트롤입니다.

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

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

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

편집 가능한 텍스트 컨트롤은 한 줄 텍스트를 입력하기 위한 기본 입력 필드입니다. 이름, 제목 또는 짧은 설명과 같은 간단한 데이터 입력에 적합합니다.

Editor에서 Textarea 컨트롤 렌더링

이 컨트롤은 추가 등록이 필요 없는 기본 내장 컨트롤입니다.

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

  const items = [
    {
      comp: "textarea",
      key: "name",
      label: "Name"
    }
  ];
</script>

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

Textarea 컨트롤은 긴 텍스트를 입력하기 위한 여러 줄 입력 필드를 제공합니다. 댓글, 설명 또는 메모에 적합합니다.

Editor에 댓글 추가

@svar-ui/vue-comments에서 Comments 위젯을 가져와 Editor 항목으로 등록합니다:

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

  registerEditorItem("comments", Comments);

  const users = [
    {
      id: 1,
      name: "John Doe",
      avatar: "https://via.placeholder.com/150",
    },
  ];

  const items = [
    {
      comp: "comments",
      key: "comments",
      label: "Comments",
      users,
      activeUser: 1,
    },

  ];

  const data = {
    comments: [
      {
        id: 1,
        user: 1,
        content: "Greetings, fellow colleagues.",
        date: new Date(),
      },
    ],
  }
</script>

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

댓글 위젯을 사용하면 Editor 내에서 댓글을 추가, 조회 및 관리할 수 있습니다. 사용자 식별 및 타임스탬프를 지원하며 협업 워크플로우나 피드백 시스템에 유용합니다.

관련 샘플: Comments

Editor에 작업 목록 추가

@svar-ui/vue-tasklist에서 TaskList 위젯을 가져와 Editor 항목으로 등록합니다:

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

  registerEditorItem("tasks", TaskList);
  const items = [
    {
      comp: "tasks",
      key: "task",
      label: "Task",
    },
  ];

  const data = {
    task: [
      {
        id: 1,
        title: "Task 1",
        status: 1,
      },
    ],
  }
</script>

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

작업 목록 위젯은 Editor에 작업 관리 기능을 통합합니다. 작업 제목과 상태 업데이트 필드를 제공하며 작업 생성 및 추적에 적합합니다.

관련 샘플: Tasklist