Установка и инициализация

Установка

Для установки библиотеки 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 и зарегистрировать как элементы Editor с помощью соответствующего хелпера registerEditorItem:

<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 задаются так же, как и в режиме редактирования. Такая конфигурация подходит для сценариев, где данные формы нужно отобразить без возможности редактирования, например в интерфейсах просмотра или аудита.

Полный код инициализации

Чтобы увидеть виджет в действии, добавьте в него несколько элементов.

<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).

Визуальные темы

Виджет поставляется в двух визуальных стилях — светлом и тёмном, управляемых тегом темы.

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

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

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