Vue切换两个卡片标签页时tinyMCE编辑器消失问题如何解决？

根因：Bootstrap标签切换仅修改DOM的display: none属性，隐藏标签页内的元素在tinyMCE初始化时无法获取正确的布局参数，导致编辑器渲染失效，原有文本框直接暴露。

所有方案均在编辑器组件内部实现，无需父级卡片层做适配，不影响组件通用性：

• 方案1：组件内部监听可见性自动修复实例
  组件挂载时初始化IntersectionObserver监听编辑器根容器，当监听到元素从不可见变为可见时，先校验当前tinyMCE实例状态：如果已失效，调用tinymce.execCommand('mceRemoveEditor', false, 编辑器ID)清理残留实例，再重新走初始化逻辑即可。组件销毁前统一调用上述销毁方法避免内存泄漏。
• 方案2：延迟初始化到元素首次可见
  组件挂载时不立刻初始化tinyMCE，通过IntersectionObserver监听容器可见性，待容器首次进入视口（可见）时再执行初始化逻辑，从根源避免隐藏状态下初始化失败的问题。
• 方案3：通过更新key强制重渲染编辑器
  在组件内部定义响应式变量editorKey = 1，可见性监听触发容器从不可见变为可见时，将editorKey值+1，模板内的<tiny-mce-editor :key="editorKey" v-model="content"></tiny-mce-editor>会自动销毁旧实例、创建新实例，无需手动处理实例销毁重建逻辑。

如果使用的是官方@tinymce/tinymce-vue封装组件，可额外在init配置中添加auto_focus: false，避免隐藏状态下自动聚焦导致的渲染异常。

内容的提问来源于stack exchange，提问作者Ondřej Langr