elementUI uses WangEditor, the Dialog component displays wangEditor rich text, multiple clicks rich text nesting problem

project requirements

The wangEditor rich text is displayed in the Dialog pop-up box, and if the rich text content is cleared every time it is opened and there is a value in the el-input, click to open the rich text to echo the value in the input box.

renderings

1. Install scaffolding

npm install wangeditor --save

2. Introduce scaffolding

import E from "wangeditor";

3. use

 <div v-for="(item,index) in riskManagementList" :key="index">
 	<div>{
   
   {item.name}}</div>
    <div style="margin: 20px 0;"></div>
    <!-- 给input添加双击事件，双击打开富文本-->
    <div @dblclick="doubleClick(item,'value')" >
    	<el-input
        	type="textarea"
            :autosize="{ minRows: 1, maxRows: 2}"
            placeholder="请输入内容"
            v-model="item.value"
       >
       </el-input>
    </div>
</div>
<el-dialog
      title="填写信息"
      :visible.sync="dialogVisible"
      @opened="show()"
      @closed="hide()"
      :before-close="handleClose"
    >
    	<!-- 设置富文本-->
      <div class="rttextcont">
        <div ref="editor"></div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="info"
          plain
          @click="cancel()"
        >取 消</el-button>
        <el-button
          type="danger"
          plain
          @click="empty()"
        >清 空</el-button>
        <el-button
          type="success"
          plain
          @click="confirm()"
        >确 定</el-button>
      </span>
    </el-dialog>

4、js

export default {
    
    
  data() {
    
    
    return {
    
    
    riskManagementList: [
        {
    
     name: '所属的公司类型:', value: '' },
        {
    
     name: '报告期内采取的风险管理改进措施以及各项措施的实施进展情况:', value: '' },
        {
    
     name: '风险管理能力自评估有关情况:', value: '' },
      ],
    }
    }
  methods: {
    
    
   //dialog显示
	show() {
    
    
	   //创建新的富文本编辑器
      this.editor = new E(this.$refs.editor);
      this.editor.create();
      //判断原本输入框中是否有值，如果有值则回填到富文本里，如果没值，则创建空的富文本进行编辑
      if (this.detailRow.value) {
    
    
        this.editor.txt.html(this.detailRow.value);
      } else {
    
    
        this.editor.txt.html('');
      }
    },
    //关闭时清空数据避免富文本重复出现，数据重叠 
    hide() {
    
    
      this.$refs.editor.innerHTML = '';
      this.editor.destroy();
      this.editor = null;
    },
    //双击输入框，打开富文本编辑器
    doubleClick(row, type) {
    
    
    //获取输入框中的数据方便回显
      this.detailRow = row
      this.detailType = type
      this.dialogVisible = true;
    },
    //dialog确认
    confirm() {
    
    
    //this.editor.txt.html()为获取富文本的内容（详情请看官方文档）
      const fhtml = this.editor.txt.html();
      //将富文本内容显示到输入框里
      let detailRowValue = this.detailType + '';
      this.detailRow[detailRowValue] = fhtml;
      this.dialogVisible = false;
      this.detailRow = []
    },
    //富文本清空(详情请看官方文档)
    empty() {
    
    
      this.editor.txt.clear();
    },
   //dialog取消
    cancel() {
    
    
      this.dialogVisible = false;
    },
    // // 弹窗关闭
    handleClose(done) {
    
    
      this.dialogVisible = false;
      done();
    },
    
	}
},

Final realization rendering

Official document address

https://www.wangeditor.com/doc/