配置工具栏

工具栏配置

Editor widget 支持添加和自定义工具栏。工具栏可以放置在编辑器的顶部或底部，并可包含按钮、标签和菜单等交互元素。这些工具栏有助于提升用户交互体验，并提供对特定操作或信息的快速访问。

为 Editor 添加顶部工具栏

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

  const topBar = {
    items: [
      { comp: "spacer" },
      { comp: "button", text: "Click me", onclick: () => alert("clicked") },
    ],
  };
</script>

<Editor {topBar} />

此配置为编辑器添加了一个顶部工具栏。工具栏包含一个用于布局调整的 spacer 和一个标有 "Click me" 的按钮。点击该按钮时，会触发一条提示消息。这种设置适用于将关键操作或控件放置在编辑器顶部，以便快速访问。

为 Editor 添加底部工具栏

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

  const bottomBar = {
    items: [
      { comp: "spacer" },
      { comp: "button", text: "Click me", handler: () => alert("clicked") },
    ],
  };
</script>

<Editor {bottomBar} />

此配置为编辑器创建了一个底部工具栏。与顶部工具栏类似，它包含一个 spacer 和一个标有 "Click me" 的按钮，点击后触发提示。这种布局通常用于放置优先级较低但仍需随时可用的操作或设置。

添加带有表单值的顶部工具栏

<script>
  import { Editor } from "@svar-ui/svelte-editor";
  import { Switch } from "@svar-ui/svelte-core";

  const topBar = {
    items: [
      { comp: "label", spacer: true, key: "label" },
      { comp: Switch, key: "state" },
    ],
  };

  const values = {
    label: "Product N1",
    state: false
  };
</script>

<Editor {topBar} {values} />

此设置添加了一个顶部工具栏，可动态使用表单值填充其元素。标签显示 "label" 键对应的值，开关切换 "state" 键的值。这种配置非常适合在工具栏中直接显示和调整设置或元数据。

在工具栏中创建操作菜单

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

  const topBar={
    items: [
      {
        comp: "label",
        spacer: true,
        text: "Item X12-A",
      },
      { comp: "separator" },
      {
        icon: "wxi-dots-v",
        collapsed: true,
        layout: "column",
        items: [
          {
           id: "done",
           comp: "item",
           text: "Mark as done",
           handler: buttonClick,
          },
          {
           id: "delete",
           comp: "button",
           type: "danger",
           text: "Delete the item",
           handler: buttonClick,
          },
        ],
      },
    ]
  };
</script>

<Editor {topBar} />

此配置在顶部工具栏中引入了一个操作菜单。菜单由一个带标签的项目、一个分隔符和一个通过图标激活的下拉菜单组成。下拉菜单包含 "Mark as done" 和 "Delete the item" 等选项，每个选项均绑定了对应的 handler 函数。这种方式特别适合提供与编辑器内容或状态相关的上下文操作，同时不会使工具栏显得杂乱。

相关示例： Toolbar values