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