electron 实现剪切板功能

1.在main.ts 

 import { app, BrowserWindow, shell, ipcMain ,dialog,clipboard,Menu} from 'electron'
 var isInput = false
 // 设置自定义上下文菜单
   win.webContents.on('context-menu', (event, params) => {
    const { editFlags, selectionText } = params;
    const contextMenuTemplate = [];

    if (editFlags.canCopy && selectionText) {
      contextMenuTemplate.push({
        label: '复制',
        click: () => {
          clipboard.writeText(selectionText);
        }
      });
    }

    if (clipboard.availableFormats().includes('text/plain') && isInput) {
      contextMenuTemplate.push({
        label: '粘贴',
        click: () => {
          const text = clipboard.readText();
          win.webContents.send('paste-text', text);
        }
      });
    }

    Menu.buildFromTemplate(contextMenuTemplate).popup(win);
  });


ipcMain.on('is-input',(event,arg)=>{
  isInput = JSON.parse(arg)
})

2.在App.vue 中监听是input输入框才让粘帖,调用 initInput 函数

let elInput  = null
ipcRenderer.on('paste-text', (event, text) => {
      if(elInput){ 
        // 确定光标位置并插入文本
        const start = elInput.selectionStart;
        const end = elInput.selectionEnd;
        const scrollTop = elInput.scrollTop; // 保存滚动位置
  
        elInput.value = elInput.value.slice(0, start) + text + elInput.value.slice(end);
        elInput.value = elInput.value?.trim()
        // 恢复光标位置和滚动位置
        elInput.setSelectionRange(start + text.length, start + text.length);
        elInput.scrollTop = scrollTop;
        elInput.focus();  

        const e = new Event('input', { bubbles: true });
        elInput.dispatchEvent(e);

        elInput = null
      }
    }) 


initInput(){
        document.addEventListener('contextmenu', (event) => {
          elInput = null
          let res = event.target.closest('.el-input__inner') 
          if (res) { 
            ipcRenderer.send('is-input',JSON.stringify(true))
            elInput = res 
            // event.preventDefault()
          }else{
            ipcRenderer.send('is-input',JSON.stringify(false))
          }
        })
      }

  

posted @ 2025-04-24 17:27  福超  阅读(31)  评论(0)    收藏  举报