【注释修正版】tinymce paste，paste_preprocess中粘贴图片之前， 完整图片上传方法 以及使用文件服务返回的URL使用方法（使用正则获取img标签），js获取img标签。

Tinymce富文本

想学，完整图片上传方法可参考代码怎么写的。

一、实例：

注释：只写了blob流图片数据格式上传，专门用在word文档里复制粘贴用的(只能一张一张复制粘贴上传)，好像tinymce，paste不支持全选图片，多张上传（我懒，想少掉点头发）

  paste_preprocess(plugin, args) {
          /**
           *  Property 'contentWindow' does not exist on type HTMLElement - 出现这个问题的处理方法；
           *  start
           */
          const isIFrame = (input: HTMLElement | null): input is HTMLIFrameElement =>
            input !== null && input.tagName === 'IFRAME';
          /** end */

          let globalcounter = 1;
          
          /**
           *  将富文本里粘贴的图片，再次复制粘贴的处理方法
           *  start
           */
          const z = '<img[^<>]*? src="([^<>]*?)"';
          const copyImg = args.content.match(z);
          if (copyImg) {
            const cStr = copyImg[1].slice(0, 4);
            if (cStr === 'fs-a') {
              return args.content;
            }
          }
          console.log(copyImg);
          /** end */

          /**
           *  使用正则表达式，获取复制内容里的img标签，同时给img标签加上id。
           *  start
           */
          args.content = args.content.replace('<img', `<img id="pasted_image_${globalcounter}"`);
          const IMG = args.content.match(z);
          /** end */
          let str: any;

          /**
           *  判断复制的内容是否存在图片，存在则运行接下来的代码，不存在则直接粘贴复制的内容。
           *  start
           */
          if (IMG) {

            /**
             *  使用JavaScript--slice()方法，截取img标签里src属性值的前四位字符，用于判断图片数据格式。
             *  start
             */
            str = IMG[1].slice(0, 4);

            if (str === 'blob') {

              /**
               *  图片上传（上传的是Blob格式）
               *  start
               */
              const blob_url = IMG[1];
              const xhr = new XMLHttpRequest();
              xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                  upload(xhr.response);
                }
              };
              xhr.open('GET', blob_url);
              xhr.responseType = 'blob';
              xhr.send();

              function upload(BlobInfo) {
                const ContentType = 'application/json';
                const Accept = 'application/json, text/plain, */*';
                const authorization = 'Bearer ' + JSON.parse(window.localStorage.getItem('_token')).token;
                const imageBlob = BlobInfo;
                const imageSize = imageBlob.size;
                const imageType = imageBlob.type;
                let imageName = null;
                if (imageType.includes('png')) {
                  imageName = 'image.png';
                } else if (imageType.includes('gif')) {
                  imageName = 'image.gif';
                } else {
                  imageName = 'image.jpg';
                }
                const imgParams = {
                  name: imageName,
                  size: imageSize,
                };

                const imageX = new XMLHttpRequest();
                imageX.open('POST', '/api/file/sign');
                imageX.onreadystatechange = () => {
                  if (imageX.readyState === 4 && imageX.status === 201) {
                    const data = JSON.parse(imageX.response);
                    const auth = data.sign;
                    const ctime = data.time;
                    const formData = new FormData();
                    formData.append(
                      'meta',
                      JSON.stringify({
                        bytesofobj: imageSize,
                        objname: imageName,
                        ctime,
                        auth,
                      }),
                    );
                    formData.append('file', imageBlob as any);

                    const xh = new XMLHttpRequest();
                    xh.open('POST', '/api-fs/upload', true);
                    xh.onreadystatechange = () => {
                      if (xh.readyState === 4 && xh.status === 200) {
                        const uploadData = JSON.parse(xh.response);
                        const uploadDataParams = {
                          name: uploadData.objname,
                          bytes: uploadData.bytesofobj,
                          md5hex: uploadData.md5,
                          oid: uploadData.objid,
                        };

                        const x = new XMLHttpRequest();
                        x.open('POST', '/api/file/upload/alain', true);
                        x.onreadystatechange = () => {
                          if (x.readyState === 4 && x.status === 201) {
                            const image = JSON.parse(x.response);
                            const imageUrl = image.url;

                            /**
                             *  iframs: 获取document里的所有iframe标签；
                             *  iframe: 获取你所需要的iframe标签；
                             *  start
                             */
                            const iframes = parent.document.getElementsByTagName('iframe');
                            const iframe = iframes[0];

                            /**
                             *  将粘贴的img标签里的src值，用图片上传返回的url值 【强制】 替换；
                             *  强制替换是因为图片此时已经显示在富文本里了；
                             *  start
                             */
                            if (isIFrame(iframe) && iframe.contentWindow) {
                              iframe.contentWindow.document
                                .getElementById(`pasted_image_${globalcounter++}`)
                                .setAttribute('src', imageUrl);
                            }
                            /** end */
                            /** end */
                          }
                        };

                        if (x.readyState === 1) {
                          x.setRequestHeader('Accept', Accept);
                          x.setRequestHeader('Content-Type', ContentType);
                          x.setRequestHeader('Authorization', authorization);
                        }

                        x.send(JSON.stringify(uploadDataParams));
                      }
                    };

                    xh.send(formData);
                  }
                };

                if (imageX.readyState === 1) {
                  imageX.setRequestHeader('Accept', Accept);
                  imageX.setRequestHeader('Content-Type', ContentType);
                  imageX.setRequestHeader('Authorization', authorization);
                }

                imageX.send(JSON.stringify(imgParams));
              }

              /** end */
            } else {
              args.content = '仅支持word文档复制的图片.png格式！';
            }
            /** end */
          }
          /** end */
        },

二、图片上传用到的知识：

注释：不懂代码意思百度

(1) XMLHttpRequest()

    ① x.open()
    ② X.on
    ③ X.send()
        1) (formData)
        2) (JSON.s(Data))

(2) FormData()

    ① F.append()

(3) JSON.parse()

(4) JSON.stringify()

三、正则获取img标签:

注释：Document 是包含img标签的内容

(1) ‘<img[^<>] src=”([^<>]*?)”>’

    ① Document
    ② Const z = ‘<img[^<>] src=”([^<>]*?)”>’;
    ③ Const img = Document.match(z);

四、DOM替换iframe标签里img标签的src值

document.getElementsByTagName(iframeId)
                                .contentWindow.document
                                .getElementById(imgId)
                                .setAttribute('src', imageUrl);

五、正则替换img标签（包含怎么替换img标签里的属性值（写的不好可参考））

注释：1、Document 是包含img标签的内容

           2、imgUrl是后台返回的url

 const imageUrl = image.url;
 newDocument = args.Document.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/gi, (match, capture) => {
     capture = capture.replace(capture, imageUrl);
     const newImg = '<img  src="' + capture + '"/>';
     return newImg;
   });