vue + wangEditor 小試牛刀

vue + wangEditor 小試牛刀
在新的後臺管理項目中因爲須要對文章、商品進行一些相關編輯，因而加入了富文本編輯器，最早是用了vue-quill-editor，發現界面有點難看，後來換ckeditor，試了好幾個npm包，後來沒有實現:( 全是淚，後來想起以前一個網友推薦的wangeditor這個編輯器，在官網看了一下，介紹的很詳細，下面就來看看再下是如何實現的，因爲剛剛開始用，目前功能不太多，只是實現瞭如何將其渲染出來，以及獲取其富文本編輯器的值。（順便提一下，wangeditor富文本編輯器對html內容支持仍是很不錯，有興趣的小夥伴能夠去試試）。
如何應用到本身的項目中去看官網文檔，很詳細，這裏很少作介紹

爲了可以實現組件的複用，我是講editor封裝成了一個獨立的組件，
實現以下：
<template>
    <div id="wangeditor">
        <div ref="editorElem" style="text-align:left"></div>
    </div>  
</template>
<script>
import E from 'wangeditor'
export default {
  name: 'editorElem',
  data () {
    return {
      editor: null,
      editorContent: ''
    }
  },
  props: ['catchData', 'content'],    // 接收父組件的方法
  watch: {
    content () {
      this.editor.txt.html(this.content)
    }
  },
  mounted () {
    this.editor = new E(this.$refs.editorElem)
    this.editor.customConfig.onchange = (html) => {
      this.editorContent = html
      this.catchData(this.editorContent)  // 把這個html經過catchData的方法傳入父組件
    }
    this.editor.customConfig.uploadImgServer = '你的上傳圖片的接口'
    this.editor.customConfig.uploadFileName = '你自定義的文件名'
    this.editor.customConfig.menus = [          // 菜單配置
      'head',  // 標題
      'bold',  // 粗體
      'fontSize',  // 字號
      'fontName',  // 字體
      'italic',  // 斜體
      'underline',  // 下劃線
      'strikeThrough',  // 刪除線
      'foreColor',  // 文字顏色
      'backColor',  // 背景顏色
      'link',  // 插入連接
      'list',  // 列表
      'justify',  // 對齊方式
      'quote',  // 引用
      'emoticon',  // 表情
      'image',  // 插入圖片
      'table',  // 表格
      'code',  // 插入代碼
      'undo',  // 撤銷
      'redo'  // 重複
    ]
                      // 下面是最重要的的方法
    this.editor.customConfig.uploadImgHooks = {
      before: function (xhr, editor, files) {
                  // 圖片上傳以前觸發
                  // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，files 是選擇的圖片文件

                  // 若是返回的結果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳
                  // return {
                  //     prevent: true,
                  //     msg: '放棄上傳'
                  // }
      },
      success: function (xhr, editor, result) {
                  // 圖片上傳並返回結果，圖片插入成功以後觸發
                  // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果
        this.imgUrl = Object.values(result.data).toString()
      },
      fail: function (xhr, editor, result) {
                  // 圖片上傳並返回結果，但圖片插入錯誤時觸發
                  // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象，result 是服務器端返回的結果
      },
      error: function (xhr, editor) {
                  // 圖片上傳出錯時觸發
                  // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
      },
      timeout: function (xhr, editor) {
                  // 圖片上傳超時時觸發
                  // xhr 是 XMLHttpRequst 對象，editor 是編輯器對象
      },

              // 若是服務器端返回的不是 {errno:0, data: [...]} 這種格式，可以使用該配置
              // （可是，服務器端返回的必須是一個 JSON 格式字符串！！！不然會報錯）
      customInsert: function (insertImg, result, editor) {
                  // 圖片上傳並返回結果，自定義插入圖片的事件（而不是編輯器自動插入圖片！！！）
                  // insertImg 是插入圖片的函數，editor 是編輯器對象，result 是服務器端返回的結果

                  // 舉例：假如上傳圖片成功後，服務器端返回的是 {url:'....'} 這種格式，便可這樣插入圖片：
        let url = Object.values(result.data)      // result.data就是服務器返回的圖片名字和連接
        JSON.stringify(url)    // 在這裏轉成JSON格式
        insertImg(url)
                  // result 必須是一個 JSON 格式字符串！！！不然報錯
      }
    }

    this.editor.create()     // 建立富文本實例
    if (!this.content) {
      this.editor.txt.html('請編輯內容1')
    }
  }
}
</script>
<style lang="scss" rel="stylesheet/scss">
    #wangeditor {
      width: 50rem;
    }  
</style>

而後在父組件中import，以下：

1. import
2. components 中註冊組件
3. 在模板中渲染<editor :catchData="catchData" :content="ruleForm.info.description"></editor>

這裏用props 項子組件editor傳了一個catchData函數，在methods中定義，用於在父組件中獲取editor中的內容，一個content做爲初始化的數據（此處是從服務器獲取的文章詳情，效果是當請求完成將詳情展現到editor中實現可編輯）

須要注意的是：我遇到是的不知如何在父組件中傳值給子組件而後在editor中展現出來，如今用的是props傳值到子組件，而後用watch監聽content的變化，若是content接收到，則經過editor.txt.html(this.content)來改變editor中的內容，（用watch的緣由是因爲數據請求多是延時，子組件不能及時獲取到content，經過watch則能夠在獲取到的時候改變內容）。在查看此文章請與官方文檔對比，特別是最後一張圖片中紅箭頭標出的this，這是修改以後的。
望你們工做順利:) !!!