vue中使用Tinymce富文本插入表情处理，打包后提交表情路径为绝对路径，修改为相对路径

在VUE中使用Tinymce富文本时今天遇到一个问题，前端打完包后执行访问后台服务，当时富文本中插入表情图片时，会存储绝对路径，导致不同客户端访问的时候表情读取失败。

不多说直接上代码，对Tinymce富文本内容做正则处理：

var result = '

4444444

' console.log(result) //截取出图片 var re = /]+>/g var imgArr = result.match(re) console.log(imgArr) if (imgArr && imgArr.length > 0) { //匹配src属性 var srcReg = /file:[\'\"]?([^\'\"]*)[\'\"]?/i // /xxx=/src，因内容不允许，请自行替换 var src = imgArr[0].match(srcReg)[0] console.log("img的src："+ src) //获取图片地址 if(src){ let delSrc = src.split("tinymce-all-in-one")[0] console.log("删除字符串：" + delSrc) if (delSrc) { var subStr=new RegExp(delSrc, "g");//创建正则表达式对象 result = result.replace(subStr,"");//把'is'替换为空字符串 console.log(result);//Is th all there is } } }

主要思路是对内容提取img的src内容，然后对路径做正则处理，欢迎大家交流

VUE tinymce 相对路径 绝对路径