斜杠命令

PreviousNext
组合框斜杠输入元素斜杠输入元素
Loading...

特性

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

套件使用

安装

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

添加套件

import { createPlateEditor } from 'platejs/react';
import { SlashKit } from '@/components/editor/plugins/slash-kit';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    ...SlashKit,
  ],
});

手动使用

安装

pnpm add @platejs/slash-command

添加插件

import { SlashPlugin, SlashInputPlugin } from '@platejs/slash-command/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    SlashPlugin,
    SlashInputPlugin,
  ],
});

配置插件

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

使用方式

如何使用斜杠命令：

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

可用选项包括：

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

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

Plate Plus

插件

SlashPlugin

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

Options

  • trigger optional string

    触发斜杠命令组合框的字符。

    • 默认值: '/'

  • triggerPreviousCharPattern optional RegExp

    匹配触发字符前字符的正则表达式。

    • 默认值: /^\s?$/

  • createComboboxInput optional () => TComboboxInputElement

    创建组合框输入元素的函数。

    • 默认值:
    () => ({
  children: [{ text: '' }],
  type: KEYS.slashInput,
});

  • triggerQuery optional (editor: PlateEditor) => boolean

    判断何时启用斜杠命令的函数。可用于在代码块等特定上下文中禁用功能。

SlashInputPlugin

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

EmojiSlash Command