electron 右键菜单

最新推荐文章于 2025-06-22 10:06:14 发布

lhangtk

最新推荐文章于 2025-06-22 10:06:14 发布

阅读量8.5k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： electron

本文链接：https://blog.youkuaiyun.com/lhangtk/article/details/88714443

electron 专栏收录该内容

3 篇文章

订阅专栏

文章目录

背景

用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)
    }
}