LewisRoc 2021-04-27 02:36 采纳率: 60%
浏览 313
已采纳

弹框中的ckeditor5富文本编辑器怎么在关闭弹窗时清空刷新内容啊

我做的是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()
        
      },

展开全部

  • 写回答

1条回答 默认 最新

  • 崽崽的谷雨 2021-04-27 02:49
    关注

    1.手动清除数据destory里(推荐使用这个)

    2.给组件加个随机的key值

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
编辑
预览

报告相同问题?

悬赏问题

  • ¥15 爱快路由器端口更改错误导致无法访问
  • ¥20 安装catkin时遇到了如下问题请问该如何解决呢
  • ¥15 VAE模型如何输出结果
  • ¥15 编译python程序为pyd文件报错:{"source code string cannot contain null bytes"
  • ¥20 关于#r语言#的问题:广义加行模型拟合曲线后如何求拐点
  • ¥15 fluent设置了自动保存后,会有几个时间点不保存
  • ¥20 激光照射到四象线探测器,通过液晶屏显示X、Y值
  • ¥50 数据库开发问题求解答
  • ¥15 安装anaconda时报错
  • ¥15 小程序有个导出到插件方式,我是在分包下引入的插件,这个export的路径对吗,我看官方文档上写的是相对路径
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部