Tag Archives: Tinymic

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

Version

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

Codes:

<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
      ···
</v-dialog>

JavaScript part of Vue Code:

···
data() {
    return {
        ···
        editorKey:''
        ···
    }
},
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.