wangEditor怎么在vue中使用

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

1、安裝

使用npm下載： `npm install wangeditor`


2、 創(chuàng)建實(shí)例

（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;//編輯框高度超過最小高度會(huì)根據(jù)內(nèi)容高度自適應(yīng)
}
</style>

3、上傳圖片

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

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

/upload是上傳圖片的服務(wù)器端接口，接口返回的數(shù)據(jù)格式如下（固定的，否則會(huì)取不到圖片地址！?。。?br/>

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

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

這些基本就夠用了。官網(wǎng)也寫得很詳細(xì)滴

wangeditor3+vue2.0簡(jiǎn)單例子

把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)    //創(chuàng)建富文本實(shí)例
     editor.customConfig.onchange = (html) => {
       this.editorContent = html
       this.catchData(html) //把這個(gè)html通過catchData的方法傳入父組件
     }
     editor.customConfig.uploadImgServer = '你的上傳圖片的接口'
     editor.customConfig.uploadFileName = '你自定義的文件名'
     editor.customConfig.uploadImgHeaders = {
       'Accept': '*/*',
       'Authorization':'Bearer ' + token  //頭部token
     }
     editor.customConfig.menus = [     //菜單配置
       'head',
       'list', // 列表
       'justify', // 對(duì)齊方式
       'bold',
       'fontSize', // 字號(hào)
       'italic',
       'underline',
       'image', // 插入圖片
       'foreColor', // 文字顏色
       'undo', // 撤銷
       'redo', // 重復(fù)
      ] 
           //下面是最重要的的方法
     editor.customConfig.uploadImgHooks = {
       before: function (xhr, editor, files) {
         // 圖片上傳之前觸發(fā)
         // xhr 是 XMLHttpRequst 對(duì)象，editor 是編輯器對(duì)象，files 是選擇的圖片文件
         
         // 如果返回的結(jié)果是 {prevent: true, msg: 'xxxx'} 則表示用戶放棄上傳
         // return {
         //   prevent: true,
         //   msg: '放棄上傳'
         // }
       },
       success: function (xhr, editor, result) {
         // 圖片上傳并返回結(jié)果，圖片插入成功之后觸發(fā)
         // xhr 是 XMLHttpRequst 對(duì)象，editor 是編輯器對(duì)象，result 是服務(wù)器端返回的結(jié)果
       this.imgUrl=Object.values(result.data).toString()
       },
       fail: function (xhr, editor, result) {
         // 圖片上傳并返回結(jié)果，但圖片插入錯(cuò)誤時(shí)觸發(fā)
         // xhr 是 XMLHttpRequst 對(duì)象，editor 是編輯器對(duì)象，result 是服務(wù)器端返回的結(jié)果
       },
       error: function (xhr, editor) {
         // 圖片上傳出錯(cuò)時(shí)觸發(fā)
         // xhr 是 XMLHttpRequst 對(duì)象，editor 是編輯器對(duì)象
       },
       timeout: function (xhr, editor) {
         // 圖片上傳超時(shí)時(shí)觸發(fā)
         // xhr 是 XMLHttpRequst 對(duì)象，editor 是編輯器對(duì)象
       },

       // 如果服務(wù)器端返回的不是 {errno:0, data: [...]} 這種格式，可使用該配置
       // （但是，服務(wù)器端返回的必須是一個(gè) JSON 格式字符串?。。》駝t會(huì)報(bào)錯(cuò)）
       customInsert: function (insertImg, result, editor) {
         // 圖片上傳并返回結(jié)果，自定義插入圖片的事件（而不是編輯器自動(dòng)插入圖片?。。。?
         // insertImg 是插入圖片的函數(shù)，editor 是編輯器對(duì)象，result 是服務(wù)器端返回的結(jié)果

         // 舉例：假如上傳圖片成功后，服務(wù)器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片：
         let url = Object.values(result.data)   //result.data就是服務(wù)器返回的圖片名字和鏈接
         JSON.stringify(url)  //在這里轉(zhuǎn)成JSON格式
         insertImg(url)
         // result 必須是一個(gè) JSON 格式字符串?。?！否則報(bào)錯(cuò)
       }
     }
     
     
     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   //在這里接受子組件傳過來的參數(shù)，賦值給data里的參數(shù)
    }
 },
components: {
  wangeditor
  },
</script>

以上就是wangEditor怎么在vue中使用，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注億速云行業(yè)資訊頻道。