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解決