首先新建editor.vue文件，用于寫(xiě)配置項(xiàng)
方法1：使用 base64 編碼直接將圖片插入到內(nèi)容中
優(yōu)點(diǎn) ：配置簡(jiǎn)單
this.editor.customConfig.uploadImgShowBase64 = true
缺點(diǎn) ：上傳圖片過(guò)大或上傳多張圖片角骤，字段可能會(huì)保存失敱锨础（被截?cái)啵┒忻担煌暾舐洌髨D無(wú)法顯示在富文本框等問(wèn)題
???如果項(xiàng)目中不想做圖片限制可以用下面的方法民轴，直接上傳到后端服務(wù)器
方法2：將圖片上傳到后端服務(wù)器
關(guān)鍵代碼：
// 配置服務(wù)器端地址 upload:上傳圖片地址
editor.customConfig.uploadImgServer = '/upload'
//可使用監(jiān)聽(tīng)函數(shù)在上傳圖片的不同階段做相應(yīng)處理
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é)果
},
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 格式字符串Ｐ渍取！蘸秘！否則會(huì)報(bào)錯(cuò)）
customInsert: function (insertImg, result, editor) {
// 圖片上傳并返回結(jié)果官卡，自定義插入圖片的事件（而不是編輯器自動(dòng)插入圖片；茸隆４茁病Ｑ爸洹）
// insertImg 是插入圖片的函數(shù)，editor 是編輯器對(duì)象颈嚼，result 是服務(wù)器端返回的結(jié)果
// 舉例：假如上傳圖片成功后毛秘，服務(wù)器端返回的是 {url:'....'} 這種格式，即可這樣插入圖片：
var url = result.url
insertImg(url)
// result 必須是一個(gè) JSON 格式字符串Ｗ杩巍＝行！否則報(bào)錯(cuò)
}
}
}
實(shí)例：
<template>
<div class="editor-wrapper">
<div :id="editorId"></div>
</div>
</template>
<script>
import {BASE_URL} from '@/libs/util.js';
import Editor from 'wangeditor'
import 'wangeditor/release/wangEditor.min.css'
import {oneOf} from '@/libs/tools'
import {Message} from 'iview';
export default {
name: 'Editor',
data() {
return {
//我自己的上傳地址
upload: BASE_URL + 'admin_api/utils/upload_image',
}
},
props: {
value: {
type: String,
default: ''
},
/**
* 綁定的值的類型, enum: ['html', 'text']
*/
valueType: {
type: String,
default: 'html',
validator: (val) => {
return oneOf(val, ['html', 'text'])
}
},
/**
* @description 設(shè)置change事件觸發(fā)時(shí)間間隔
*/
changeInterval: {
type: Number,
default: 200
},
/**
* @description 是否開(kāi)啟本地存儲(chǔ)
*/
cache: {
type: Boolean,
default: false
}
},
computed: {
editorId() {
return `editor${this._uid}`
}
},
methods: {
setHtml(val) {
this.editor.txt.html(val)
}
},
mounted() {
this.editor = new Editor(`#${this.editorId}`)
this.editor.customConfig.onchange = (html) => {
let text = this.editor.txt.text()
if (this.cache) localStorage.editorCache = html
this.$emit('input', this.valueType === 'html' ? html : text)
this.$emit('on-change', html, text)
}
this.editor.customConfig.uploadFileName = 'myFile';
// this.editor.customConfig.uploadImgMaxSize =5 * 1024 * 1024 //控制圖片大小
this.editor.customConfig.onchangeTimeout = this.changeInterval
this.editor.customConfig.uploadFileName = 'file' //上傳參數(shù) 自定義
this.editor.customConfig.uploadImgServer = this.upload //上傳圖片
this.editor.customConfig.uploadImgHooks = { //監(jiān)聽(tīng)
before: function (xhr, editor, files) {
// 圖片上傳之前觸發(fā)
},
success: function (xhr, editor, result) {
// 圖片上傳并返回結(jié)果限煞，圖片插入成功之后觸發(fā)
},
fail: function (xhr, editor, result) {
Message.error('插入圖片失斈摇！')
},
error: function (xhr, editor) {
Message.error('插入圖片失斒鹱ぁ奋献！')
},
timeout: function (xhr, editor) {
Message.error('插入圖片失敗旺上！')
},
customInsert: function (insertImg, result, editor) {
var url = result.prefix + result.path
insertImg(url)
}
}
this.editor.create()
let html = this.value || localStorage.editorCache
if (html) this.editor.txt.html(html)
}
}
</script>
以上瓶蚂。
