Vuetify dialog嵌入Tinymce后源码编辑、插入代码示例插件无法输入问题

问题根源 #

该问题是Vuetify Dialog默认开启的焦点捕获机制导致的：Dialog会强制限制所有焦点事件只能在自身DOM范围内的可聚焦元素上触发，而TinyMCE的插件弹窗默认是挂载到页面body节点下，不属于Dialog的DOM范围，因此触发插件弹窗的输入框聚焦时，会被Dialog的焦点逻辑强制把焦点拉回Dialog内部的原有元素。

可行解决方案 #

方案1：关闭Dialog焦点捕获（最简单通用） #

直接给v-dialog组件添加关闭焦点捕获的属性即可，不同Vuetify版本写法略有差异：

<!-- Vuetify 2.x 版本 -->
<v-dialog v-model="dialogVisible" no-focus-trap max-width="800px">
  <!-- 嵌入TinyMCE编辑器 -->
  <tinymce-editor v-model="content" :init="tinyMceConfig" />
</v-dialog>

<!-- Vuetify 3.x 版本 -->
<v-dialog v-model="dialogVisible" :retain-focus="false" max-width="800px">
  <!-- 嵌入TinyMCE编辑器 -->
  <tinymce-editor v-model="content" :init="tinyMceConfig" />
</v-dialog>

方案2：修改TinyMCE弹窗挂载节点（保留焦点捕获，符合可访问性要求） #

如果产品要求Dialog必须保留焦点捕获逻辑（禁止用户操作Dialog外的页面元素），可以配置TinyMCE的ui_container参数，让所有TinyMCE生成的弹窗都挂载到Dialog内部的DOM节点上，让焦点捕获机制可以正常识别到弹窗的输入框：

<template>
  <v-dialog 
    v-model="dialogVisible" 
    max-width="800px"
    ref="editorDialog"
  >
    <tinymce-editor v-model="content" :init="tinyMceConfig" />
  </v-dialog>
</template>
<script>
export default {
  data() {
    return {
      dialogVisible: false,
      content: '',
      tinyMceConfig: {
        // 原有TinyMCE配置，比如插件、工具栏等
        plugins: 'code codesample',
        toolbar: 'code codesample',
        // 关键配置：指定弹窗挂载到Dialog节点下
        ui_container: () => this.$refs.editorDialog.$el
      }
    }
  }
}
</script>

以上两种方案都可以解决TinyMCE插件弹窗输入框无法聚焦的问题，可根据自身业务场景选择。

内容的提问来源于stack exchange，提问作者Wolffyx