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

前言

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

原因

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

解决

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

html 复制代码

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

js 复制代码

     // 弹窗打开后的回调，处理编辑器聚焦
    onDialogOpened() {
      setTimeout(() => {
        // 第一步：让浏览器窗口获得系统级焦点
        window.focus()

        // 第二步：强制让 document.body 失焦再聚焦，重置焦点状态
        document.body.focus()
        document.body.blur()

        // 第三步：聚焦编辑器
        setTimeout(() => {
          const canvas = document.querySelector('canvas')
          if (canvas) {
            canvas.focus()
            canvas.click()

            // 派发一个无害的键盘事件激活编辑器
            const keyEvent = new KeyboardEvent('keydown', {
              key: 'Shift',
              code: 'ShiftLeft',
              keyCode: 16,
              bubbles: true,
              composed: true
            })
            canvas.dispatchEvent(keyEvent)
          }
        }, 150)
      }, 300)
    },