npm install wangeditor@4
<template>
<div class="">
<div ref="toolbar" class="toolbar"></div>
<div ref="editor" class="texts"></div>
</div>
</template>
<script>
import E from 'wangeditor'
export default {
name:'about',
model:{
event:'change'
},
data(){
return {
editor: null,
info_: null
}
},
mounted() {
this.seteditor()
},
methods:{
seteditor(){
this.editor = new E(this.$refs.toolbar, this.$refs.editor)
this.editor.config.uploadImgShowBase64 = false
this.editor.config.uploadImgServer = 'http://www.dizhi.com/'
this.editor.config.uploadImgHeaders = { }
this.editor.config.uploadFileName = 'file'
this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024
this.editor.config.uploadImgMaxLength = 6
this.editor.config.uploadImgTimeout = 3 * 60 * 1000
this.editor.config.menus = [
'head',
'bold',
'fontSize',
'fontName',
'italic',
'underline',
'strikeThrough',
'foreColor',
'backColor',
'list',
'justify',
'quote',
'image',
'table',
'undo',
'redo',
'fullscreen'
]
this.editor.config.uploadImgHooks = {
fail: (xhr, editor, result) => {
},
success: (xhr, editor, result) => {
},
timeout: (xhr, editor) => {
},
error: (xhr, editor) => {
},
customInsert: (insertImg, result, editor) => {
console.log(result)
let url = result.data.fileName
insertImg(url)
}
}
this.editor.config.onchange = (html) => {
this.info_ = html
this.$emit('change', this.info_)
}
this.editor.create()
},
}
}
</script>
<style>
.toolbar {
border: 1px solid #ccc;
}
.texts {
border: 1px solid #ccc;
min-height: 150px;
}
</style>