輕量級富文本編輯器wangEditor結合vue使用方法

一、安裝

使用npm下載：`npm install wangeditor`

二、 建立實例

（1）基本用法：

<template>
    <div>
        <div id="editor" class="editor"></div>
    </div>
</template>

<script>
import E from 'wangeditor'
export default {
    name: 'editor',
    mounted () {
        var editor = new E('#editor')
        editor.create()
    }
}
</script>

效果如圖

---

（2）自定義高度寫法以下：把菜單和編輯框分開

<template>
    <div>
        <div id="editorMenu" class="editorMenu"></div>
        <div id="editor" class="editor"></div>
    </div>
</template>

<script>
import E from 'wangeditor'
export default {
    name: 'editor',
    mounted () {
        var editor = new E('#editorMenu', '#editor')
        editor.create()
    }
}
</script>

<style scoped>
.editorMenu {
  border: 1px solid #ccc;
}
.editor {
  margin-top: -1px;//將多出來的一像素邊框隱藏
  border: 1px solid #ccc;
  min-height: 400px;//編輯框最小高度
  height:auto;//編輯框高度超過最小高度會根據內容高度自適應
}
</style>

三、上傳圖片

（1）editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存圖片
（2）editor.customConfig.uploadImgServer = '/upload' // 上傳服務器端地址
/upload是上傳圖片的服務器端接口，接口返回的數據格式以下（固定的，不然會取不到圖片地址！！！）：

{
    // errno 即錯誤代碼，0 表示沒有錯誤。
    //       若是有錯誤，errno != 0，可經過下文中的監聽函數 fail 拿到該錯誤碼進行自定義處理
    "errno": 0,

    // data 是一個數組，返回若干圖片的線上地址
    "data": [
        "圖片1地址",
        "圖片2地址",
        "……"
    ]
}

這些基本就夠用了

官網也寫得很詳細滴
感謝您看到最後~