斜杠命令 - Plate

特性

快速访问各种编辑器命令
通过 / 字符触发
支持键盘导航和筛选
可自定义的命令组和选项

</PackageInfo>

套件使用

<Steps>

安装

添加斜杠命令功能最快的方式是使用 SlashKit，它包含预配置的 SlashPlugin 和 SlashInputPlugin 以及它们的 Plate UI 组件。

SlashInputElement: 渲染带有预定义选项的斜杠命令组合框

添加套件

tsx

import { createPlateEditor } from 'platejs/react';
import { SlashKit } from '@/components/editor/plugins/slash-kit';

const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    ...SlashKit,
  ],
});

</Steps>

手动使用

<Steps>

安装

bash

npm install @platejs/slash-command

添加插件

tsx

import { SlashPlugin, SlashInputPlugin } from '@platejs/slash-command/react';
import { createPlateEditor } from 'platejs/react';

const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    SlashPlugin,
    SlashInputPlugin,
  ],
});

配置插件

tsx

import { SlashPlugin, SlashInputPlugin } from '@platejs/slash-command/react';
import { createPlateEditor } from 'platejs/react';
import { SlashInputElement } from '@/components/ui/slash-node';
import { KEYS } from 'platejs';

const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    SlashPlugin.configure({
      options: {
        trigger: '/',
        triggerPreviousCharPattern: /^\s?$/,
        triggerQuery: (editor) =>
          !editor.api.some({
            match: { type: editor.getType(KEYS.codeBlock) },
          }),
      },
    }),
    SlashInputPlugin.withComponent(SlashInputElement),
  ],
});

options.trigger: 触发斜杠命令组合框的字符（默认: /）
options.triggerPreviousCharPattern: 匹配触发字符前字符的正则表达式
options.triggerQuery: 判断何时启用斜杠命令的函数
withComponent: 指定斜杠命令界面的UI组件

</Steps>

使用方式

如何使用斜杠命令：

在文档任意位置输入 / 打开斜杠菜单
开始输入以筛选选项，或使用方向键导航
按回车或点击选择选项
按ESC键不选择直接关闭菜单

可用选项包括：

文本块（段落、标题）
列表（项目符号、编号、待办事项）
高级块（表格、代码块、标注）
行内元素（日期、公式）

<Callout type="info"> 使用关键词快速查找选项。例如输入 '/ul' 查找项目符号列表，或 '/h1' 查找一级标题。 </Callout>

Plate Plus

插件

SlashPlugin

实现斜杠命令功能的插件。扩展自 TriggerComboboxPluginOptions。

<API name="SlashPlugin"> <APIOptions> <APIItem name="trigger" type="string" optional> 触发斜杠命令组合框的字符。 - **默认值:** `'/'` </APIItem> <APIItem name="triggerPreviousCharPattern" type="RegExp" optional> 匹配触发字符前字符的正则表达式。 - **默认值:** `/^\s?$/` </APIItem> <APIItem name="createComboboxInput" type="() => TComboboxInputElement" optional> 创建组合框输入元素的函数。 - **默认值:** ```tsx () => ({ children: [{ text: '' }], type: KEYS.slashInput, }); ``` </APIItem> <APIItem name="triggerQuery" type="(editor: PlateEditor) => boolean" optional> 判断何时启用斜杠命令的函数。可用于在代码块等特定上下文中禁用功能。 </APIItem> </APIOptions> </API>

SlashInputPlugin

处理斜杠命令插入的输入行为。