跳到主要内容

安装与初始化

安装​

要安装 Svelte Editor 库，请运行以下命令：

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

//yarn
yarn add @svar-ui/svelte-editor
note

该包已从 wx-svelte-editor 迁移至 @svar-ui/svelte-editor。在 Svelte SVAR 3.0 更新之前，我们将继续发布 wx-svelte-editor

初始化​

Editor widget 提供灵活的初始化选项，允许开发者定义输入字段、预填充值，以及将 widget 设置为可编辑或只读模式。它支持多种配置方式，适用于不同的使用场景。

初始化 Editor widget​

Editor 内置了以下控件："text"、"textarea"、"checkbox"、"section" 和 "readonly"。

若要使用其他控件，需从 @svar-ui/svelte-core 库中导入，并通过 registerEditorItem helper 将其注册为 Editor 的 items：

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

<Editor {items} {values} />

此示例演示了如何使用一组输入字段及其对应值来初始化 editor widget。items 数组定义了表单结构，每个对象指定输入类型（comp）、唯一键（key）和用户友好的标签（label）。values 对象通过键名为这些输入提供初始值。此配置适用于创建带有预加载数据的基础表单，例如编辑已有记录的场景。

以只读模式初始化 Editor widget​

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

<Editor {items} {values} readonly={true} />

此示例展示了如何以只读模式初始化 editor widget。readonly 属性设置为 true，以防止用户修改输入字段。items 数组和 values 对象的定义方式与可编辑模式相同。此配置适用于需要展示表单数据但不允许编辑的场景，例如审核或审计界面。

readonly

完整初始化代码​

若要查看 widget 的实际效果，请向其添加一些 items。

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

<Willow>
  <Editor {items} {values} />
</Willow>
备注

为确保正确初始化，建议在应用顶层应用主题。若单独使用 Editor 组件，请不要忘记将其包裹在主题中（上例中使用了 Willow）。

视觉主题​

该 widget 提供两种视觉样式——浅色和深色，通过主题标签进行控制。

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

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

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