wangEditor 自定义上传图片
//需要项目后台提供上传接口uploadFile
下载接口FILE_URL:
Object.defineProperties(Vue.prototype, {
FILE_URL: {
value: function (fileId) {
if (!fileId) {
return
}
return (
process.env.VUE_APP_REMOTE_URL +
'mi' +
'/api/v1/file/download' +
toQueryString({ token: getToken(), fileId })
)
},
},
})
---------------------------------------------------------------------------------------
this.editor = new E('#editor')
const this_ = this
// 自定义上传图片
this.editor.config.customUploadImg = async function (
resultFiles,
insertImgFn,
) {
// resultFiles 是 input 中选中的文件列表
// insertImgFn 是获取图片 url 后,插入到编辑器的方法
const promises = resultFiles.map(file => {
const formData = new FormData()
formData.append('file', file)
return uploadFile(formData)
})
const imgIds = await Promise.all(promises)
const urls = imgIds.map(v => this_.FILE_URL(v))
urls.forEach(v => {
this_.editor.cmd.do(
'insertHtml',
'<img src="' + v + '" style="width:100%"/>',
)
})
}
this.editor.create()
this.editor.txt.html('') //设置内容
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了