脚本宝典收集整理的这篇文章主要介绍了Vue Tinymce 富文本框插入图片，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。
在使用vue 富文本框的时候，我们会使用Tinymce富文本框处理内容，该组件默认的上传地址的服务器部署的机器，重启机器的话会导致图片丢失。
此时我们希望把图片上传至fastdfs图片服务器，然后content中保存对应的图片路径
组件
<el-upload
:multiple="true"
:file-list="fileList"
:show-file-list="true"
:on-remove="handleRemove"
:on-success="handleSuccess"
:before-upload="beforeUpload"
class="editor-slide-upload"
:action="uploadFileUrl"
list-type="picture-card">
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
data() {
return {
dialogVisible: false,
listObj: {},
fileList: [],
uploadFileUrl: "", // 对应后端路径
}
},
methods: { // 上传成功后的回调函数
handleSuccess(response, file) {
const uid = file.uid
const objKeyArr = Object.keys(this.listObj)
for (let i = 0, len = objKeyArr.length; i < len; i++) {
if (this.listObj[objKeyArr[i]].uid === uid) {
this.listObj[objKeyArr[i]].url = response.body.url // 从后端获取到的图片路径，会填充至内容的对应位置
this.listObj[objKeyArr[i]].hasSuccess = true
return
}
}
},
}
以上是脚本宝典为你收集整理的Vue Tinymce 富文本框插入图片全部内容，希望文章能够帮你解决Vue Tinymce 富文本框插入图片所遇到的问题。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。