ReactPage编辑器自定义右键菜单开发实战-开发者社区

ReactPage编辑器自定义右键菜单开发实战

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

在现代Web应用中，右键菜单是用户交互的重要枢纽。ReactPage作为开源富文本编辑器的佼佼者，其插件化架构为开发者提供了无限的定制可能。通过自定义右键菜单，你可以将业务关键操作直接呈现在右键菜单中，减少点击次数，缩短操作路径，根据项目需求定制专属功能入口。

为什么需要自定义右键菜单？

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;

集成与使用

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

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