对话框内嵌Tinymce富文本插件再次打开数据不变且不可编辑

罗罗小黑

已于 2023-01-06 10:55:00 修改

阅读量1k

点赞数 1

文章标签： vue.js 前端 javascript

于 2023-01-06 10:51:21 首次发布

本文链接：https://blog.csdn.net/qq_42527053/article/details/128574936

版权

问题描述

vue-element-admin使用Tinymce富文本插件，内嵌于 el-dialog 再次打开数据不变且不可编辑

由于富文本不适合双向数据流，所以只会 watch 传入富文本的内容一次变化，之后传入内容的变化就不会再监听了，如果之后还有改变富文本内容的需求。
可以通过 this.refs.xxx.setContent() 手动来设置。

上面为 vue-element-admin 官方文档中的解释
实际使用先打印 this.refs.xxx 视打印结果来看是具体用法，下面代码打印出来显示是一维数组，故 this.$refs.editor[0] 。

原因是因为弹窗是父组件，富文本是子组件，弹窗关闭的时候子组件没有触发销毁钩子函数，既然没有销毁，那么第二次打开弹窗的时候也就不会再次初始化，所以父组件的弹窗每次打开关闭、打开关闭，显示都是第一次的富文本内容。

解决方案：

根据以上内容可得出解决的办法就是在弹窗关闭的同时将富文本销毁，这样每次打开编辑弹窗时富文本都是新的

// html vue2 新增/修改对话框
<el-dialog :title="title" :visible.sync="openShow"  width="800px" @opened="handOpened">
   <tinymce ref="editor" v-model="form.content" :height="300" v-if="openShow" />

   <div slot="footer" class="dialog-footer">
     <el-button @click="cancel">取 消</el-button>
   </div>
</el-dialog>

// script
handOpened() {
  this.title == '新增' && (this.$refs.editor[0].setContent(""))
  this.title == '修改' && (this.$refs.editor[0].setContent(this.form.content))
},
cancel() {
  this.openShow = false
}