块菜单

PreviousNext

Provides quick access to block-specific actions.

块上下文菜单块菜单块上下文菜单
Loading…

功能特性

  • 右键点击块元素可打开上下文菜单
  • 支持对块元素执行多种操作：转换类型、复制或删除等
  • 可自定义菜单项和操作行为
  • 支持键盘导航
  • 与块选择功能集成

套件使用

安装

最快捷的方式是使用 BlockMenuKit，它包含预配置的 BlockMenuPlugin 以及 BlockSelectionPlugin 和它们的 Plate UI 组件。

'use client';
 
import { BlockMenuPlugin } from '@platejs/selection/react';
 
import { BlockContextMenu } from '@/components/ui/block-context-menu';
 
import { BlockSelectionKit } from './block-selection-kit';
 
export const BlockMenuKit = [
  ...BlockSelectionKit,
  BlockMenuPlugin.configure({
    render: { aboveEditable: BlockContextMenu },
  }),
];
'use client';
 
import { BlockMenuPlugin } from '@platejs/selection/react';
 
import { BlockContextMenu } from '@/components/ui/block-context-menu';
 
import { BlockSelectionKit } from './block-selection-kit';
 
export const BlockMenuKit = [
  ...BlockSelectionKit,
  BlockMenuPlugin.configure({
    render: { aboveEditable: BlockContextMenu },
  }),
];

添加套件

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

手动配置

安装依赖

pnpm add @platejs/selection
pnpm add @platejs/selection

添加插件

块菜单功能需要同时安装 BlockSelectionPlugin 和 BlockMenuPlugin 才能正常工作。

import { BlockSelectionPlugin, BlockMenuPlugin } from '@platejs/selection/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    BlockSelectionPlugin.configure({
      options: {
        enableContextMenu: true,
      },
    }),
    BlockMenuPlugin,
  ],
});
import { BlockSelectionPlugin, BlockMenuPlugin } from '@platejs/selection/react';
import { createPlateEditor } from 'platejs/react';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    BlockSelectionPlugin.configure({
      options: {
        enableContextMenu: true,
      },
    }),
    BlockMenuPlugin,
  ],
});

配置插件

通过上下文菜单组件配置块菜单：

import { BlockSelectionPlugin, BlockMenuPlugin } from '@platejs/selection/react';
import { createPlateEditor } from 'platejs/react';
import { BlockContextMenu } from '@/components/ui/block-context-menu';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    BlockSelectionPlugin.configure({
      options: {
        enableContextMenu: true,
      },
    }),
    BlockMenuPlugin.configure({
      render: { aboveEditable: BlockContextMenu },
    }),
  ],
});
import { BlockSelectionPlugin, BlockMenuPlugin } from '@platejs/selection/react';
import { createPlateEditor } from 'platejs/react';
import { BlockContextMenu } from '@/components/ui/block-context-menu';
 
const editor = createPlateEditor({
  plugins: [
    // ...其他插件
    BlockSelectionPlugin.configure({
      options: {
        enableContextMenu: true,
      },
    }),
    BlockMenuPlugin.configure({
      render: { aboveEditable: BlockContextMenu },
    }),
  ],
});
  • BlockSelectionPlugin.options.enableContextMenu: 启用上下文菜单功能
  • BlockMenuPlugin.render.aboveEditable: 指定 BlockContextMenu 组件来渲染上下文菜单

控制上下文菜单行为

通过 data-plate-open-context-menu 属性可控制特定元素是否触发上下文菜单：

<PlateElement data-plate-open-context-menu={false} {...props}>
  {children}
</PlateElement>
<PlateElement data-plate-open-context-menu={false} {...props}>
  {children}
</PlateElement>

此属性常用于防止在 <Editor /> 组件的空白区域右键时弹出菜单。

Plate Plus 专业版

  • Open the menu via the drag button or the three-dot menu on specific blocks (e.g. images)
  • Includes a combobox that filters options as you type
  • Supports nested menu options
  • Advanced actions such as "Ask AI", colors, and commenting
  • Beautifully crafted UI

插件系统

BlockMenuPlugin

用于管理块菜单状态和上下文菜单功能的插件

API 接口

api.blockMenu.hide

隐藏块菜单

api.blockMenu.show

为指定块显示菜单

Parameters

    要显示菜单的块ID，或使用'context'表示上下文菜单

    菜单显示位置坐标。若未提供，则仅更新openId状态

api.blockMenu.showContextMenu

为指定块显示上下文菜单并自动选中该块

Parameters

    要显示上下文菜单的块ID

    菜单显示位置坐标