安装与初始化

安装

要安装 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 辅助函数将其注册为 Editor 的 items：

<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 对象的定义方式与可编辑模式相同。此配置适用于需要展示表单数据但不允许编辑的场景，例如审查或审计界面。

完整初始化代码

要查看组件的实际效果，请向组件中添加一些 items。

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