块菜单

PreviousNext
块上下文菜单块菜单块上下文菜单
Files
components/demo.tsx
'use client';

import * as React from 'react';

import { Plate, usePlateEditor } from 'platejs/react';

import { EditorKit } from '@/components/editor/editor-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

import { DEMO_VALUES } from './values/demo-values';

export default function Demo({ id }: { id: string }) {
  const editor = usePlateEditor({
    plugins: EditorKit,
    value: DEMO_VALUES[id],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer variant="demo">
        <Editor />
      </EditorContainer>
    </Plate>
  );
}
Block-level context menu with formatting options.
block-menu-demo
block-menu-demo

功能特性

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

套件使用

安装

最快捷的方式是使用 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 },
  }),
];

添加套件

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

手动配置

安装依赖

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';
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>

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

Plate Plus 专业版

block-menu
block-menu

插件系统

BlockMenuPlugin

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

API 接口

api.blockMenu.hide

隐藏块菜单

api.blockMenu.show

为指定块显示菜单

Parameters

Collapse all

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

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

api.blockMenu.showContextMenu

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

Parameters

Collapse all

    要显示上下文菜单的块ID

    菜单显示位置坐标

AutoformatBlock Menu