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

浙公网安备 33010602011771号