Tinymce，Vuetify 对话框，无法在源代码编辑器中编写或插入代码示例

Question

我在使用 vuetify 对话框和 tinymce 编辑器时遇到问题。 当我打开带有编辑器的对话框时，编辑器无法按预期工作，尤其是编辑源代码或插入代码示例等插件。 当我打开其中一个（其中一个插件）时，我无法专注于插件创建的文本区域，它每次都专注于对话框的输入

我附上了 here (codesandbox) 工作示例代码。 完整的描述在他们的 Github issue page.

有解决问题的想法吗？

谢谢

Answer 1

这里的问题是 Vuetify（以及许多其他模态对话框实现）会将焦点困在对话框中并阻止它移动到任何其他弹出窗口，例如 TinyMCE 使用的弹出窗口。要禁用此功能，您需要添加 retain-focus 属性，如文档中所述：https://vuetifyjs.com/en/api/v-dialog/#props

这是一个工作代码和框：https://codesandbox.io/embed/tinymce-vue-forked-ec670?file=/src/App.vue