electron 右键菜单

背景

用electron实现了一个文本编辑器,需要使用右键菜单来进行文本的复制粘贴和撤销重做功能,同时保证在非编辑区域不能弹出,文本选中后可进行复制
以下将实现过程记录下来,细节见注释

最终完整代码


const remote = require('electron').remote;
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;
/**
 * 初始化右键菜单
 */
function initMenu(){

    const menu = new Menu();
    const menu2 = new Menu();
    menu.append(new MenuItem({label:'撤销', role: 'undo' }));
    menu.append(new MenuItem({label:'重做', role: 'redo' }));
    // menu.append(new MenuItem({ role: 'separator' }));
    menu.append(new MenuItem({label:'剪切', role: 'cut' }));
    menu.append(new MenuItem({label:'复制', role: 'copy' }));
    menu.append(new MenuItem({label:'粘贴', role: 'paste' }));
    // menu.append(new MenuItem({ role: 'pasteandmatchstyle' }));
    menu.append(new MenuItem({label:'删除', role: 'delete' }));
    menu.append(new MenuItem({ label:'全选', role: 'selectall' }));

    menu2.append(new MenuItem({label:'复制', role: 'copy' }));
    //点击dome
    menu2.append(new MenuItem({label:'show', click() { 
        //展示选中文本
        let selectText = window.getSelection().toString();
        alert(selectText); 
    } }));
    window.addEventListener('contextmenu', (e) => { 
        e.preventDefault();
        if(isEleEditable(e.target)){
            menu.popup(remote.getCurrentWindow());
        }else{
            //判断有文本选中
            let selectText = window.getSelection().toString();
            if(!!selectText){
                menu2.popup(remote.getCurrentWindow());
            }
        }
        
    }, false) 
}
/**
 * 判断点击区域可编辑
 * @param {*} e 
 */
function isEleEditable(e){
    if(!e){
        return false;
    }
    //为input标签或者contenteditable属性为true
    if(e.tagName == 'INPUT' || e.contentEditable == 'true'){
        return true;
    }else{
        //递归查询父节点
        return isEleEditable(e.parentNode)
    }
}

官方文档

官方文档也很详细

https://electronjs.org/docs/api/menu

### 实现 Electron 应用中右键保存图片的功能 为了实现在 Electron 应用中通过右键菜单保存图片的功能,可以按照以下方法构建应用程序: #### 创建基础的 Electron 项目 首先建立一个新的文件夹用于存放项目的源码,并初始化 npm 包来管理依赖项。 ```bash mkdir my-electron-app && cd my-electron-app yarn init -y ``` 安装必要的开发依赖 `electron` 和其他可能需要用到的库[^1]。 ```bash yarn add electron --dev ``` #### 构建主进程代码 编辑主进程中负责创建窗口以及配置全局行为的部分,在这里引入对上下文菜单的支持。具体来说就是当用户点击网页内的图像时弹出自定义的右键菜单选项允许他们下载选中的图片。 在主进程中加载 webContents 的 will-navigate 或 did-finish-load 事件监听器内设置 contextBridge 来安全地暴露 API 给渲染线程访问操作系统级别的功能,比如打开对话框让用户选择存储位置等操作。 接着编写如下 JavaScript 代码片段作为示例展示如何向特定元素附加右击响应函数从而触发显示带有 "Save Image As..." 动作条目的弹窗列表供最终确认执行实际的数据传输过程[^2]: ```javascript const { app, BrowserWindow, ipcMain, dialog, Menu } = require('electron'); let win; function createWindow() { win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), nodeIntegration: true, contextIsolation: false } }); win.loadURL(`file://${__dirname}/index.html`); const menuTemplate = [ { label: 'File', submenu: [] }, // ... other menus ... ]; if (process.platform === 'darwin') { menuTemplate.unshift({}); } const mainMenu = Menu.buildFromTemplate(menuTemplate); Menu.setApplicationMenu(mainMenu); } app.on('ready', () => { createWindow(); win.webContents.on('context-menu', async(event, params) => { let menuItemArray = []; if (params.mediaType === 'image' || params.srcURL !== '') { menuItemArray.push( { label: 'Save image as...', click: async() => { try { const result = await dialog.showSaveDialog(win, {}); console.log(result.canceled); // Boolean indicating whether the dialog was canceled. console.log(result.filePath); // String containing file path of selected location. if (!result.canceled) { // Implement saving logic here using filePath and srcUrl from params object. } } catch (err) { console.error(err); } } }); } const popupMenu = Menu.buildFromTemplate(menuItemArray); popupMenu.popup(); }); }); ``` 这段脚本会检测到鼠标右键单击发生在任何类型的媒体资源上(特别是图像),并且会在这种情况下提供一个额外的选择:“另存为...”。一旦选择了这个命令,则调用系统的文件浏览器让使用者指定目标路径完成整个流程[^3]。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

lhangtk

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值