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.