解决wangeditor富文本编辑器在element-ui el-dialog不显示问题

smileNano

已于 2023-11-22 13:12:41 修改

阅读量2.8k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： wangeditor 文章标签： vue elementui

于 2021-05-31 17:12:55 首次发布

本文链接：https://blog.csdn.net/smileNano/article/details/117421612

wangeditor 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue中结合El-Dialog组件使用WangEditor编辑器。当El-Dialog打开时，通过`@opened`事件加载编辑器，并创建实例。关闭时，利用`@closed`事件清空编辑器内容，防止数据重叠。通过这种方式，实现了编辑器在对话框中的有效管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

（注： import E from "wangeditor"）

1、在el-dialog里添加 @opened=""与 @closed=""

<el-dialog title="文章发布" :visible.sync="dialogFormVisible" @opened="show()" @closed="hide()"  :before-close="handleClose">
            <el-form :model="form">
               <el-form-item label="内容详情：" :label-width="formLabelWidth" class="editorMenu">
                   //wangeditor
                   <div ref="editorElem"></div>
               </el-form-item>
             </el-form>
          </el-dialog>

2、 @opened="show()"

// 对编辑器进行加载  
show() {
      const that = this
      var editor = new E(this.$refs.editorElem)
      // editor.config.showFullScreen = false
      editor.create();
    },

3、@closed="hide()"

//关闭时清空数据避免重叠 
hide() {
      this.$refs.editorElem.innerHTML = ''
      this.editor = null
    },

注：不懂的请在评论区提问或私信，很乐意为您解决代码中的问题