npm install wangeditor --save 用npm时要全小写
vue中引入
<template>
<div ref="editor"
style="text-align:left"></div>
</template>
<script>
import E from 'wangeditor'
export default {
data () {
return {
editor: ''
}
},
components: {},
methods: {
createEditor () {//初始化方法
console.log(this.$refs.editor)
this.editor = new E(this.$refs.editor)
this.editor.customConfig.uploadImgServer = '/'// 配置本地上传功能,顺便写的
//通过下面的方法重写
this.editor.customConfig.customUploadImg = function (files, insert) {
var formdata = new FormData()
formdata.append('ext', _this.imgExt)
formdata.append('uploadfile', files[0])
var xhr = new XMLHttpRequest()
xhr.open('POST', HostNameBASE_APIHIS)// 线上地址
xhr.send(formdata)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
insert(res)//参数是一个url
}
}
}
this.editor.create()
},
getContent () { // editor内容
console.log(this.editor.txt.html())
console.log(this.editor.txt.text())
}
}
}
</script>
网友评论