文档超级无敌清楚
安装
yarn add wangeditor
vue 使用
import E from 'wangeditor'
const self = this
this.currEditor = new E(document.getElementById('div1'))
this.currEditor.config.menus = [
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'indent',
'lineHeight',
'foreColor',
'backColor',
'link',
'list',
'todo',
'justify',
'quote',
'image',
'table',
'splitLine',
'undo',
'redo'
]
this.currEditor.config.uploadImgServer = `${this.baseUrl}/tool/minio/uploadFile`
this.currEditor.config.uploadFileName = 'files'
this.currEditor.config.uploadImgMaxSize = 1 * 1024 * 1024 // 1M
this.currEditor.config.uploadImgParams = {
Authorization: 'Bearer ' + getToken()
}
this.currEditor.config.uploadImgHooks = {
// 上传图片之前
// before: function(xhr) {
// console.log(xhr)
// // 可阻止图片上传
// return {
// prevent: true,
// msg: '需要提示给用户的错误信息'
// }
// },
// 图片上传并返回了结果，图片插入已成功
success: function(xhr) {
console.log('success', xhr)
},
// 图片上传并返回了结果，但图片插入时出错了
fail: function(xhr, editor, resData) {
console.log('fail', resData)
},
// 上传图片出错，一般为 http 请求的错误
error: function(xhr, editor, resData) {
console.log('error', xhr, resData)
},
// 上传图片超时
timeout: function(xhr) {
console.log('timeout')
},
// 图片上传并返回了结果，想要自己把图片插入到编辑器中
// 例如服务器端返回的不是 { errno: 0, data: [...] } 这种格式，可使用 customInsert
customInsert: function(insertImgFn, result) {
// result 即服务端返回的接口
console.log('customInsert', result)
// insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
// insertImgFn(result.data[0])
insertImgFn(_.get(result, 'data[0].url'))
}
}
this.currEditor.create()
this.currEditor.txt.html(this.form.description)
this.currEditor.config.onchange = function(newHtml) {
self.form.description = newHtml
}
