<template>
|
<div id="editor" ref="editor"></div>
|
</template>
|
|
<script>
|
import E from 'wangeditor'
|
export default {
|
name:'WangEditor',
|
props:{
|
wangEditorContent:{
|
type:String,
|
},
|
isClear: {
|
type: Boolean,
|
default: false
|
},
|
upload_config_id:{
|
type:Number,
|
}
|
},
|
data() {
|
return {
|
editor: ""
|
}
|
},
|
watch: {
|
isClear(val) {
|
if(val) {
|
this.editor.txt.clear()
|
}
|
}
|
},
|
mounted() {
|
this.$nextTick(function() {
|
const _this = this
|
this.editor = new E(this.$refs.editor)
|
this.editor.config.uploadImgMaxLength = 1
|
this.editor.config.uploadFileName = 'file'
|
this.editor.config.uploadImgAccept = ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'webp']
|
this.editor.config.uploadImgMaxSize = 10 * 1024 * 1024
|
this.editor.config.uploadImgServer = '#'
|
this.editor.create()
|
if(_this.wangEditorContent){
|
this.editor.txt.html(_this.wangEditorContent)
|
}
|
this.editor.config.onchange = (html)=>{
|
_this.$emit('update:wangEditorContent',html)
|
}
|
|
this.editor.config.uploadImgHooks = {
|
error: function(xhr, editor, resData) {
|
console.log('error', xhr, resData)
|
},
|
customInsert: function(insertImgFn, result) {
|
insertImgFn(result.data)
|
}
|
}
|
|
this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
|
let formdata = new FormData()
|
formdata.append('file', resultFiles[0])
|
formdata.append('edit', true)
|
formdata.append('upload_config_id', _this.upload_config_id)
|
_this.$axios.post('/Upload/upload', formdata).then(res => {
|
insertImgFn(res.data.data)
|
})
|
}
|
});
|
}
|
}
|
</script>
|
