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

vue中使用Tinymce富文本插入表情处理

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

解决办法

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

var result = '<p>4444<img src="file:///F:/develop/yq_workspace/client/StudentTrainingNew20200313/dist/tinymce-all-in-one/plugins/emoticons/img/smiley-embarassed.gif" alt="embarassed" />444<img src="file:///F:/develop/yq_workspace/client/StudentTrainingNew20200313/dist/tinymce-all-in-one/plugins/emoticons/img/smiley-foot-in-mouth.gif" alt="foot-in-mouth" /></p>'
      console.log(result)
      //截取出图片  <img />
      var re = /<img[^>]+>/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内容，然后对路径做正则处理，欢迎大家交流