两个组件
“wangeditor”: “^4.7.5”,
“ali-oss”: “^6.7.0”
放入package.json
cnpm install
<div id="weditor"></div>
import E from 'wangeditor'
import OSS from 'ali-oss'
export default {
data() {
return {
editor: '',
}
},
mounted() {
this.editor = new E('#weditor')
this.configEditor()
this.editor.create()
},
method:{
configEditor() {
// 设置编辑区域高度为 500px
this.editor.config.height = 800
// 配置OSS
let client = new OSS({
region: 'region',
accessKeyId: 'accessKeyId',
accessKeySecret: 'accessKeySecret',
bucket: 'bucket'
})
let this_ = this
this.editor.config.customUploadImg = async function(resultFiles, insertImgFn) {
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后,插入到编辑器的方法
// 重点在这里
// 首先wangeditor文档用的是异步的方式向编辑器插入图片,这是不行的,要改同步
// resultFiles 如果用forEach() 遍历也是异步的,改成for循环
for (let i =0;i<resultFiles.length;i++){
let res = await client.put(this_.guid(),resultFiles[i])
insertImgFn(res.url)
}
}
},
},
}