wangEditor怎么在vue中使用

本篇文章給大家分享的是有關wangEditor怎么在vue中使用，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

1、安裝

使用npm下載： `npm install wangeditor`


2、 創建實例

（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.customConfig.onchange = (html) => {
      this.formArticle.content = html
    }
    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.customConfig.onchange = (html) => {
      this.formArticle.content = html
    }
    editor.create()
  }
}
</script>

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

3、上傳圖片

（1）editor.customConfig.uploadImgShowBase64 = true   // 使用 base64 保存圖片

（2）editor.customConfig.uploadImgServer = '/upload' // 上傳服務器端地址

/upload是上傳圖片的服務器端接口，接口返回的數據格式如下（固定的，否則會取不到圖片地址！！！）：

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

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

這些基本就夠用了。官網也寫得很詳細滴

wangeditor3+vue2.0簡單例子

把wangeditor作為組件的形式使用

子組件中

<template>
  <div id="wangeditor">
    <div ref="editorElem" ></div>
  </div> 
</template>

<script>
 import E from 'wangeditor'
 export default {
   name: 'editorElem',
   data () {
    return {
     editorContent: '',
    }
   },
   props:['catchData'],  //接收父組件的方法
   mounted() {
     var editor = new E(this.$refs.editorElem)    //創建富文本實例
     editor.customConfig.onchange = (html) => {
       this.editorContent = html
       this.catchData(html) //把這個html通過catchData的方法傳入父組件
     }
     editor.customConfig.uploadImgServer = '你的上傳圖片的接口'
     editor.customConfig.uploadFileName = '你自定義的文件名'
     editor.customConfig.uploadImgHeaders = {
       'Accept': '*/*',
       'Authorization':'Bearer ' + token  //頭部token
     }
     editor.customConfig.menus = [     //菜單配置
       'head',
       'list', // 列表
       'justify', // 對齊方式
       'bold',
       'fontSize', // 字號
       'italic',
       'underline',
       'image', // 插入圖片
       'foreColor', // 文字顏色
       'undo', // 撤銷
       'redo', // 重復
      ] 
           //下面是最重要的的方法
     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 格式字符串！！！否則報錯
       }
     }
     
     
     editor.create() 
   },

父組件中

<template>
 <div id="father">
  <wangeditor :catchData="catchData"></wangeditor>
 </div>
</template>

<script>
 import wangeditor from './wangeditor'
data(){
  return{
   content:""
  }
 },
methods:{
  catchData(value){
     this.content=value   //在這里接受子組件傳過來的參數，賦值給data里的參數
    }
 },
components: {
  wangeditor
  },
</script>

以上就是wangEditor怎么在vue中使用，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。