解决Element UI中el-dialog内Wangeditor富文本编辑器内容残留问题

问题描述

在Vue项目中，当使用Element UI的el-dialog组件来承载一个包含Wangeditor富文本编辑器的表单时，可能会遇到这样一个问题：当关闭对话框后再次打开，其他输入框的内容都能被正确清空，但富文本编辑器中的内容却保持不变。这通常是因为Wangeditor的实例没有被正确销毁，导致即使对话框被关闭，编辑器的内容状态依然保留在内存中。

初步尝试

首先，可能会尝试在对话框关闭时手动销毁Wangeditor的实例。这通常涉及到调用Wangeditor提供的destroy方法。然而，仅仅这样做可能并不足以解决问题，因为Vue的组件销毁和DOM的移除之间可能存在细微的时机差异。

深入分析与解决

检查Wangeditor的销毁逻辑

确保在组件销毁的生命周期钩子（如beforeDestroy或unmounted）中正确调用了Wangeditor的destroy方法。通常类似这样（详见官方文档 用于 Vue React | wangEditor）：

beforeDestroy() {  
  if (this.editor) {  
    this.editor.destroy();  
    this.editor = null;  
  }  
}

 使用Element UI的销毁API

为了彻底解决内容残留问题，我们可以结合Vue的组件销毁逻辑。当对话框需要关闭时，我们不仅要设置visible为false来隐藏对话框，还要确保整个表单组件（或至少包含Wangeditor的组件）被正确销毁。这可以通过Vue的key属性来实现，每次打开对话框时都生成一个新的key值，这样Vue就会重新渲染并销毁旧的组件实例。

然而，更简单且直接的方法是直接调用Element UI的销毁方法Element - The world's most popular Vue UI framework

 

因为如果不如此做，仅关闭弹窗无法销毁editor的组件(除非刷新页面强制Wangeditor调用他的销毁模块)此时需要使用elementUI的直接销毁方法销毁整个窗口 destroy-on-close，通过这种方式，你可以确保每次打开对话框时都是一个新的、干净的表单状态，避免了内容残留的问题。