解决vuetify对话框嵌入tinymic组件内容不可编辑

包版本

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

 

 

 

 

 

线上代码

 

vue代码template部分：

<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>

 

vue代码JavaScript部分：

···
data() {
    return {
        ···
        editorKey:''
        ···
    }
},
mounted() {
    // 被嵌入的editor组件必须再挂载时重新赋予key，否则内容editor是不会工作的
    this.editorKey = '' + Math.random()
}
···    

 

解决问题

 

1、vuetify对话框内tinymce组件自带的图片编辑框表单元素不能聚焦

添加  :retain-focus="false" 即可解决

2、切换到其他路由之后再切回来，点击tinymce组件不可编辑

在当前组件中添加的mounted钩子中为tinymce组件添加动态key

 

 

参考文章：

1、https://stackoverflow.com/questions/67546373/vuejs-vuetify-using-tinymce-as-a-component-in-a-dialog-requires-reloading

2、https://stackoverflow.com/questions/55780976/tinymce-insert-edit-image-fields-on-pop-up-are-not-editablefocused-inside-vuet