vue+element:富文本编辑框使用

表单设计：

<el-form-item label="内容" label-width="150px">
          <div ref="editor"  style="text-align:left;margin: 5px;width: 800px"> </div>
</el-form-item>

　　

  //富文本编辑框
  updated(){
    var editor = new E(this.$refs.editor)
    editor.customConfig.uploadImgShowBase64 = true // 使用 base64 保存图片
    // 不可修改
    editor.customConfig.uploadImgHeaders = this.headers
    // 自定义文件名，不可修改，修改后会上传失败
    editor.customConfig.uploadFileName = 'file'
    editor.customConfig.uploadImgServer = this.imagesUploadApi // 上传图片到服务器
    editor.customConfig.onchange = (html) => {
      this.form.content= html
    }
    // var isAdd=this.$route.query.isAdd
    // console.log(isAdd)
    //初始化编辑框
    editor.create()
    //如果是编辑的页面将内容传到富文本框中
    editor.txt.html(this.form.content)
    // }
  },

　刚开始我用的是created函数，但是点击编辑之后，原本内容里面的数据并没有呈现在编辑的富文本框里，后来将created函数换为类updated函数就可以实现了

原因：在vue的生命周期中，created存在于dom元素未渲染之前，mounted存在于dom元素渲染之后，但是表单内容还是最初时候初始化的时候，而updated则存在于所有数据更新之后，

所以若想要将编辑页面内容传到富文本中

editor.txt.html(this.form.content)
前提是this.form.content是有数据的，即使用updated函数就解决了

 ----------------------------更新----------------------------

这种方法虽然可以达到效果，但是在任何数据都有更新的情况都有可能触发update这个函数，对性能影响不好

解决方法：使用nextTick解决