在多个Vuetify对话框中使用TinyMCE时编辑器空白无法编辑

这个问题的核心原因是：TinyMCE的初始化高度依赖DOM元素的可见性与就绪状态，当多个Vuetify对话框切换时，未激活对话框内的TinyMCE要么提前渲染在隐藏DOM中导致初始化失败，要么实例缓存冲突引发渲染异常。以下是几种彻底解决的方案：

方案一：绑定对话框可见状态+延迟初始化 #

仅在对话框完全显示后才渲染并初始化TinyMCE，避免隐藏状态下的无效初始化：

1. 给每个对话框绑定独立的显示状态变量，配合v-if控制TinyMCE的渲染时机
2. 利用Vuetify对话框的@opened事件，在对话框完全展开后触发编辑器初始化（通过nextTick确保DOM就绪）

代码示例：

<template>
  <div>
    <v-btn @click="dialog1Open = true">打开对话框1</v-btn>
    <v-dialog v-model="dialog1Open" @opened="initEditor('editor1')">
      <v-card>
        <v-card-text>
          <editor v-if="dialog1Open" id="editor1" v-model="content1" />
        </v-card-text>
      </v-card>
    </v-dialog>

    <v-btn @click="dialog2Open = true">打开对话框2</v-btn>
    <v-dialog v-model="dialog2Open" @opened="initEditor('editor2')">
      <v-card>
        <v-card-text>
          <editor v-if="dialog2Open" id="editor2" v-model="content2" />
        </v-card-text>
      </v-card>
    </v-dialog>
  </div>
</template>

<script setup>
import { nextTick, ref, watch } from 'vue'
import Editor from '@tinymce/tinymce-vue'

const dialog1Open = ref(false)
const dialog2Open = ref(false)
const content1 = ref('')
const content2 = ref('')

async function initEditor(editorId) {
  await nextTick()
  const existingEditor = tinymce.get(editorId)
  if (!existingEditor) {
    tinymce.init({
      selector: `#${editorId}`,
      // 你的TinyMCE配置项，比如工具栏、插件等
      toolbar: 'undo redo | bold italic',
      plugins: 'lists'
    })
  } else {
    existingEditor.show()
  }
}

// 对话框关闭时隐藏编辑器实例
function destroyEditor(editorId) {
  const editor = tinymce.get(editorId)
  if (editor) {
    editor.hide()
  }
}

watch(dialog1Open, (newVal) => {
  if (!newVal) destroyEditor('editor1')
})
watch(dialog2Open, (newVal) => {
  if (!newVal) destroyEditor('editor2')
})
</script>

方案二：使用key强制组件重建 #

给每个TinyMCE组件设置唯一的key，当对话框切换时，Vue会通过key的变化销毁旧组件并创建新实例，彻底避免缓存冲突：

<editor 
  v-if="dialog1Open" 
  key="editor-in-dialog-1" 
  id="editor1" 
  v-model="content1" 
  :init="{ toolbar: 'undo redo | bold' }"
/>

<editor 
  v-if="dialog2Open" 
  key="editor-in-dialog-2" 
  id="editor2" 
  v-model="content2" 
  :init="{ toolbar: 'undo redo | bold' }"
/>

这种方式无需手动管理实例，适合场景简单的情况，Vue会自动处理组件的销毁与重建，确保TinyMCE每次都能基于全新的DOM初始化。

关键注意事项 #

• 每个TinyMCE的id必须唯一，不能重复
• 避免在隐藏状态下渲染TinyMCE组件，始终通过v-if控制渲染时机
• 如果使用手动初始化，务必确保DOM就绪后再调用tinymce.init

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