我做的是vue的后台管理项目，在修改的弹框中有一个富文本编辑器里边能回显当前项得文本和图片内容从而进行修改，我用的别人封装的组件，每次关闭当前弹框再点击其他弹框时富文本编辑器中显示的还是第一个弹框的内容除非手动刷新一下浏览器，请教各位大神怎么解决啊，下边是我编辑器组件的代码和父组件关闭弹框的监听事件
<template>
<div class="editBigCon generateReport" style="height:300px">
<div class="toolbarContainer">
<div id="toolbar-container"></div>
</div>
<div id="editor-container" style="height:200px">
<div id="editor"></div>
</div>
</div>
</template>
<script>
import DecoupledEditor from '@ckeditor/ckeditor5-build-decoupled-document'
import '@ckeditor/ckeditor5-build-decoupled-document/build/translations/zh-cn.js'
var that;
export default {
// props: ['reviewReport'],
name: "",
mixins:"",
components: {},
data () {
return {
editor:null,//编辑器实例
editorHeight:0,//报告文档的高度
template:"",
reviewReport: "",
}
},
created(){
},
computed: {},
mounted(){
that = this;
that.setDefaultCssResize();
that.$nextTick(function(){
that.initCKEditor();
});
},
methods: {
setDefaultCssResize(){
that.$nextTick(function(){
that.editorHeight = document.body.clientHeight - 163;
});
},
getItem(){
return document.querySelector('#editor').innerHTML;
},
// 定义关闭弹框后清空编辑器内容的方法
clearImg() {
this.reviewReport= ''
this.$forceUpdate()
// CKEditor.instances.generateReport.setData(' ')
},
initCKEditor() {
DecoupledEditor.create(document.querySelector('#editor'), {
language: 'zh-cn',
toolbar: ['heading','|','bold', 'italic', 'Underline', 'fontSize', 'highlight', '|', 'numberedList', 'bulletedList', '|', 'alignment:left', 'alignment:right', 'alignment:center', 'alignment:justify', '|','Indent','Outdent','|','imageUpload','Link','insertTable','|','redo', 'undo', ],//撤销,//重做
ckfinder: {
uploadUrl:'https://factory.sunspots.tech/factory/fileupload/uploadImgFordapeng'//后端处理上传逻辑返回json数据,包括uploaded(选项true/false)和url两个字段
}
}).then(editor => {
const toolbarContainer = document.querySelector('#toolbar-container');
toolbarContainer.appendChild(editor.ui.view.toolbar.element);
setTimeout(() => {
editor.setData(this.reviewReport);
this.$forceUpdate()
},500)
// 上传图片获取的数据
this.editor = editor;
}).catch(error => {
// console.error(error);
});
},
},
}
</script>
上边是封装的编辑器子组件下边是父组件中代码
// 更新确定按钮
editInformation() {
this.editDialogVisible = false
// let usrls = typeof(this.imageUrl[0]) == 'undefined'?'':this.imageUrl[0];
// console.log(usrls)
let param = {
newsId: this.editList.newsId,
content: this.$refs.generateReports.getItem(),
title: this.editList.title,
type: this.editList.type
}
// debugger
this.$http.post('/news/update_one', param).then((res) => {
this.$message.success('更新成功')
this.getNewsList()
console.log(res);
})
},
// 更新对话框取消按钮关闭事件
editNo() {
// 调用子组件清空编辑器内容方法
this.$refs.generateReports.clearImg()
// 关闭弹窗
this.editDialogVisible = false
this.getNewsList()
},
// 监听更新对话框的关闭事件
upDateDialogClosed() {
// location. reload()
// this.$router.go(0)
this.$refs.generateReports.clearImg()
this.$refs.upDateFormList.resetFields()
this.$refs.generateReports.reviewReport = ''
this.getNewsList()
},
