终极指南：ReactPage编辑器上下文菜单自定义完整教程-编程实验室

终极指南：ReactPage编辑器上下文菜单自定义完整教程

【免费下载链接】react-page项目地址: https://gitcode.com/gh_mirrors/ed/editor

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

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

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

将高频操作直达右键菜单，减少操作层级提升效率
整合业务特定功能入口，打造专属编辑工作流
通过条件显示机制，让菜单更智能更贴合使用场景

理解菜单配置结构

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

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

创建菜单扩展插件：文本转换实战

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

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属性向编辑器注入自定义菜单项。类似的模式也用于自定义布局插件中，展示了编辑器强大的扩展能力。

集成与使用：快速上手配置

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

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: () => {} } ]