Add a rich text box to the dialog of element-ui. How to solve the problem of superposition of multiple text boxes after many clicks in wangeditor,?

as the title shows, when writing a background article management page, the content of the article is edited by popping up dialog, the text is edited using wangEditor, and the creation and configuration code of wangEditor is added in the response method of the edit button. The result is shown in the figure:
after the first click of the button, the rich text box does not display properly;

;

;

for the fourth time, it shows three . and so on.
this is what my code says:
Pop-up dialog button:

<el-table-column label="">
          <template slot-scope="scope">
            <el-button size="small" type="success" @click="editArticle(scope.row)"></el-button>
            <el-button size="small" type="info" @click="delArticle(scope.row)"></el-button>
          </template>
</el-table-column>

Definition of rich text box in

dialog box:

<el-dialog title="" :visible.sync="dialogVisible">
        <el-form :model="articleInfo" label-width="160px" ref="articleInfo" :rules="articleRules">
            <el-form-item label=":" prop="Content">
                <div  id="editor" style="text-align:left"></div>
            </el-form-item>
        </el-form>
</el-dialog>

response method to dialog button in JS code:

 editArticle(row){
          this.dialogVisible = true;
          this.articleInfo = row;
          console.log("row:", this.articleInfo);

          //
          let self = this;
          var editor = new E("-sharpeditor");
          editor.customConfig.onchange = (html) => {
            self.articleInfo.Content = html;
          };
          editor.customConfig.uploadImgServer = "/api/v1/put_file";
          editor.customConfig.showLinkImg = false;
          editor.customConfig.customUploadImg = function (files, insert) {
            // files  input 
            // insert  url 
            //
            // console.log(files);
            //
            for(let i=0;i<files.length;iPP){

              //form
              let param = new FormData(); //form
              param.append("file",files[i],files[i].name);//appendform
              //param.append("chunk","0");//form
              //  console.log(param.get("file")); //FormDataget
              let config = {
                headers: {"Content-Type": "multipart/form-data"}
              };

              myAxios.post("/api/v1/put_file",param,config)
                .then(res => {
                  console.log(res);

                  let url="http://"+res.data.data.url;
                  // 
                  insert(url);
                })
                .catch(err => {
                  console.log(err)
                });
            }
          };

          editor.create();
        },

I myself have tried to add a listening method when closing the dialog box, and then turn off editor, but both editor.close () and editor.destory () will prompt that there is no such method and ask for help.