3分钟上手！ReactPage上下文菜单自定义完全指南

2026-02-05 05:01:25作者：秋泉律Samson

你是否还在为编辑器操作效率低而烦恼？右键点击却找不到想要的功能？本文将带你3步实现ReactPage编辑器上下文菜单的个性化定制，让你的内容创作效率提升300%！读完本文你将掌握：自定义菜单配置、快捷操作绑定、插件集成技巧三大核心技能。

为什么需要自定义上下文菜单？

ReactPage作为开源富文本编辑器的新星，其插件化架构允许开发者深度定制编辑体验。上下文菜单（Context Menu）作为用户最常用的交互入口之一，默认配置往往无法满足特定业务需求。通过自定义上下文菜单，你可以：

将高频操作直达右键菜单
减少操作层级提升效率
整合业务特定功能入口

项目中已有的自定义插件示例展示了如何扩展编辑器功能，上下文菜单正是这种扩展能力的重要体现。

实现自定义上下文菜单的核心步骤

1. 理解菜单配置结构

ReactPage的上下文菜单通过插件系统进行扩展，每个菜单项需要定义以下核心属性：

interface ContextMenuItem {
  id: string;           // 唯一标识
  label: string;        // 显示文本
  icon?: ReactNode;     // 可选图标
  onAction: () => void; // 点击回调
  condition?: () => boolean; // 显示条件
  hotkey?: string;      // 快捷键
}

在编辑器核心代码中，上下文菜单通过onContextMenu事件触发，你可以在插件定义中通过contextMenuItems属性注入自定义项。

2. 创建菜单扩展插件

以下是一个完整的自定义上下文菜单插件示例，实现了文本转换功能：

import { CellPlugin } from '@react-page/editor';

const textTransformPlugin: CellPlugin = {
  id: 'text-transform-plugin',
  name: '文本转换',
  description: '添加文本大小写转换的上下文菜单',
  contextMenuItems: (props) => [
    {
      id: 'uppercase',
      label: '转为大写',
      onAction: () => {
        const { editor, selection } = props;
        // 实现文本转换逻辑
        editor.execCommand('text-transform', 'uppercase', selection);
      },
      condition: () => props.selection?.focusOffset > 0
    },
    {
      id: 'lowercase',
      label: '转为小写',
      onAction: () => {
        const { editor, selection } = props;
        editor.execCommand('text-transform', 'lowercase', selection);
      },
      condition: () => props.selection?.focusOffset > 0
    }
  ],
  // 其他插件属性...
};

export default textTransformPlugin;

这个示例展示了如何通过contextMenuItems属性向编辑器注入自定义菜单项，类似的模式也用于自定义布局插件中。

3. 集成与使用

将自定义插件添加到编辑器配置中：

import Editor from '@react-page/editor';
import textTransformPlugin from './plugins/textTransformPlugin';
import { cellPlugins } from './plugins/cellPlugins';

// 添加自定义插件
const customizedPlugins = [...cellPlugins, textTransformPlugin];

export default function MyEditor() {
  const [value, setValue] = useState();
  
  return (
    <Editor
      value={value}
      onChange={setValue}
      cellPlugins={customizedPlugins}
    />
  );
}

完成集成后，在编辑器中选中文本并右键点击，即可看到新增的文本转换菜单项。效果类似于文本编辑插件演示中的交互体验。

高级技巧与最佳实践

条件显示菜单项

通过condition属性可以根据上下文动态控制菜单项的可见性，例如只在选中图片时显示图片相关操作：

{
  id: 'image-crop',
  label: '裁剪图片',
  onAction: () => {/* 裁剪逻辑 */},
  condition: () => props.cell.type === 'image'
}

快捷键绑定

为常用菜单项添加快捷键提升操作效率：

{
  id: 'save',
  label: '保存',
  onAction: () => {/* 保存逻辑 */},
  hotkey: 'mod+s' // mod在Windows是Ctrl，在Mac是Command
}

菜单分组与分隔线

通过特殊的分隔符项可以对菜单项进行分组：

contextMenuItems: () => [
  { id: 'group1-item1', label: '项目1', onAction: () => {} },
  { id: 'group1-item2', label: '项目2', onAction: () => {} },
  { id: 'separator1', type: 'separator' }, // 分隔线
  { id: 'group2-item1', label: '项目3', onAction: () => {} }
]