关于在vue项目中使用wangEditor 富文本编辑器

sudo  npm install wangeditor --save

<div id="editor"></div>

setTimeout(() => {

this.editor = new WangEditor('#editor')

this.editor.customConfig.uploadImgServer = '/qm-server/files/upload'

this.editor.customConfig.uploadFileName = 'file'

this.editor.customConfig.uploadImgParams = {

type: '1'

}

this.editor.customConfig.customUploadImg = (files, insert) => {  // 配置上传图片

let formData = new FormData()

formData.append('file', files[0])

formData.append('type', '1')

this.$axios.put('/qm-app/files/upload', formData, { headers: { 'Content-Type': 'multipart/form-data' } }).then(result => {

if (result.data.status === '200') {

insert(result.data.data) // 上传代码返回结果之后，将图片插入到编辑器中

} else {

this.$message.warning(result.data.msg)

return false

}

})

}

if (!this.$route.query.lssueRules) {

this.editor.create()

}

}, 1000)

猜你喜欢