tinymce内容中网页img图片上传-摩杜云开发者社区

tinymce中可以复制html页面以及网页样式等强大的功能的。如果是网页中的图片，img中的src是会自带路径的，但是网页图片上传后需要从哪里拿也是问题。然后讨论的结果是把当前的这个图片上传到公司的服务器上就不用之前网页上的地址了，可以省去很多问题。

一：查看文档

根据中文文档查看的英文文档，文档链接在这里

项目中的要求是需要将网页中的图片转放到自己的服务器上，这样就不用走之前的网页的图片了，我们自己也在处理内容方面也会比较方便一些。为了实现这个功能就看了文档。文档中有说这个方法：paste_preprocess，这个方法表示的是：此选项使您能够在粘贴的内容插入编辑器之前对其进行修改。

tinymce内容中网页img图片上传_图片上传

二：实现方法

文档找到了就要实现方法了，当时想的就是把内容中所有的图片拿出来，然后上传到公司的服务器中，实现起来还是有点困难的。因为内容中可能会有多个文件，这样在处理的时候就需要进行循环调用接口等功能。

首先想着怎么获取所有的图片

因为图片用的标签是img，所有想着把所有的img拿出来。这里是将复制粘贴的内中含有img标签的内容拿出来放到数组中来。

let inContent = args.content;
inContent = inContent.replace(/crossorigin="anonymous"/g, '');//如果出现匿名就替换
var imgReg = /<img.*?(?:>|/>)/gi;
var arr = inContent.match(imgReg); // img数组
var srcReg = /src=['"]?([^'"]*)['"]?/g;

然后将拿出来的标签进一步循环处理，处理完成后进行图片上传。这里不仅仅是将图片中含有http的拿出来了，有的图片是用的base64的方法进行渲染了，这种也将图片拿出来了。base64用的是data类型的，都拿出来后进行判断是否含有公司域名的后缀，如果没有，说明是其他来源的图片，就需要将图片上传到公司的服务器中。

if (arr) {
    arr.forEach((item, index) => {
      var src = item.match(srcReg); // src/data-src/...匹配带有src的数组
       const srcValue = src[0].replace("src=", "").replace(/"/g, "").replace(/&/g, "&");
       const subString= ['http','data']
      if (src && src[0].indexOf('公司域名的后缀') == -1&& subString.includes(srcValue.substring(0,4))) {
        imgupload({ file: srcValue })//上传接口
          .then((res) => {
            const bizCode = res.data.rspResult.bizCode;
            if (bizCode === 200) {
              src.forEach((element) => {
                inContent = inContent.replace(
                  element,
                  `src="${res.data.data.url}"`
                );
              });
              this.$emit('geEditor', inContent);
            } else {
              src.forEach((element) => {
                inContent = inContent.replace(element, `src=""`);
              });
            }
          })
          .catch((err) => {
            this.$message.error('System error');
          });
      }
    });
  }

三：总结

经过这个问题处理，发现文档的用处非常大，特别是英文原文档，中文的可能翻译会有差异，或者内容翻译不全，但是英文的文档内容比较全面，可能描述和例子处理方面会比较简单，但是能解决问题的文档就是好文档。

paste_preprocess: (plugin, args) => {
  let inContent = args.content;
  inContent = inContent.replace(/crossorigin="anonymous"/g, '');//如果出现匿名标签就替换
  var imgReg = /<img.*?(?:>|/>)/gi;
  var arr = inContent.match(imgReg); // img数组
  var srcReg = /src=['"]?([^'"]*)['"]?/g;
  if (arr) {
    arr.forEach((item, index) => {
      var src = item.match(srcReg); // src/data-src/...匹配带有src的数组
       const srcValue = src[0].replace("src=", "").replace(/"/g, "").replace(/&/g, "&");
       const subString= ['http','data']
      if (src && src[0].indexOf('公司域名的后缀') == -1&& subString.includes(srcValue.substring(0,4))) {
        imgupload({ file: srcValue })//上传接口
          .then((res) => {
            const bizCode = res.data.rspResult.bizCode;
            if (bizCode === 200) {
              src.forEach((element) => {
                inContent = inContent.replace(
                  element,
                  `src="${res.data.data.url}"`
                );
              });
              this.$emit('geEditor', inContent);
            } else {
              src.forEach((element) => {
                inContent = inContent.replace(element, `src=""`);
              });
            }
          })
          .catch((err) => {
            this.$message.error('System error');
          });
      }
    });
  }
},