斜杠命令

PreviousNext

Slash command menu for quick insertion of various content types.

组合框斜杠输入元素斜杠输入元素
Loading…

特性

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

套件使用

安装

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

'use client';
 
import { SlashInputPlugin, SlashPlugin } from '@platejs/slash-command/react';
import { type SlateEditor, KEYS } from 'platejs';
 
import { SlashInputElement } from '@/components/ui/slash-node';
 
export const SlashKit = [
  SlashPlugin.configure({
    options: {
      triggerQuery: (editor: SlateEditor) =>
        !editor.api.some({
          match: { type: editor.getType(KEYS.codeBlock) },
        }),
    },
  }),
  SlashInputPlugin.withComponent(SlashInputElement),
];
'use client';
 
import { SlashInputPlugin, SlashPlugin } from '@platejs/slash-command/react';
import { type SlateEditor, KEYS } from 'platejs';
 
import { SlashInputElement } from '@/components/ui/slash-node';
 
export const SlashKit = [
  SlashPlugin.configure({
    options: {
      triggerQuery: (editor: SlateEditor) =>
        !editor.api.some({
          match: { type: editor.getType(KEYS.codeBlock) },
        }),
    },
  }),
  SlashInputPlugin.withComponent(SlashInputElement),
];

添加套件

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

手动使用

安装

pnpm add @platejs/slash-command
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';
 
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),
  ],
});
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键不选择直接关闭菜单

可用选项包括：

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

Plate Plus

  • Extended set of slash menu options like "Ask AI"
  • Trigger slash menu by click the + button on the left gutter
  • Item groups
  • Beautifully crafted UI

插件

SlashPlugin

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

Options

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

    • 默认值: '/'

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

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

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

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

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

SlashInputPlugin

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