How to Solve vuetify dialog box cannot be edited (The embedded tinymic component)


vue ^2.6.11
vuetify ^2.5.3
tinymce 5.3.2
@tinymce/tinymce-vue ^3


<v-dialog v-model="xxx" width="1000" eager content-class="same-dialog" :retain-focus="false">
      <p-editor v-model="formParamer.content" :key="editorKey" class="px-3 pb-3"></p-editor> //封装过的tinymce

JavaScript part of Vue Code:

data() {
    return {
mounted() {
    // The embedded editor component must be re-given the key when it is mounted again, otherwise the content editor will not work
    this.editorKey = '' + Math.random()

solve the problem

1. The picture edit box form element of TinyMCE component in vuetify dialog box cannot be focused

add: Retain focus = "false"

2. Switch to another route and then switch back. Click the TinyMCE component, which cannot be edited.

Add a dynamic key to the TinyMCE component in the mounted hook added in the current component.

Similar Posts: