VUE弹窗univer编辑器无法使用删除键问题

前言

使用univer在线文档编辑器，正常全屏打开功能正常，内嵌到弹窗打开，数据可正常加载，但是不可以删除和右键，键盘事件捕获不到

原因

弹窗打开时，浏览器窗口本身可能没有获得系统级焦点，或者 Element Plus 弹窗的焦点锁定机制把焦点“困”在了一个不可编辑的区域，导致编辑器虽然显示正常，但键盘事件根本传不到 Canvas 里。

解决

缺少一个@opened="onDialogOpened"捕获焦点事件

<!-- 在线文件弹窗 --><el-dialogclass="dialog"v-model="iframeDialogVisible"title="在线文件":style="{ width: '95%', height: '95%' }"destroy-on-close@opened="onDialogOpened"@close="handleDialogClose"><divstyle="max-height:70vh;overflow-y:auto;"><OnlineFileref="onlineFileRef"v-if="iframeDialogVisible":paramId="currentSheetId":paramType="'sheet'":openType="'popup'"@save-rolo-params="handleSaveRoloParams"/></div></el-dialog>

// 弹窗打开后的回调，处理编辑器聚焦onDialogOpened(){setTimeout(()=>{// 第一步：让浏览器窗口获得系统级焦点window.focus()// 第二步：强制让 document.body 失焦再聚焦，重置焦点状态document.body.focus()document.body.blur()// 第三步：聚焦编辑器setTimeout(()=>{constcanvas=document.querySelector('canvas')if(canvas){canvas.focus()canvas.click()// 派发一个无害的键盘事件激活编辑器constkeyEvent=newKeyboardEvent('keydown',{key:'Shift',code:'ShiftLeft',keyCode:16,bubbles:true,composed:true})canvas.dispatchEvent(keyEvent)}},150)},300)},