【无标题】

从word文档粘贴公式、图片到富文本

监听粘贴事件，获取剪贴板的数据
onPaste() {
      this.$refs.richTextBox.addEventListener('paste', (e) => {
        const clipdata = e.clipboardData || window.clipboardData;
        const rtf = clipdata.getData('text/rtf')
        this.replaceImagesFileSourceWithInlineRepresentation(this.extractImageDataFromRtf(rtf))
      });
    },
   //获取图片信息
extractImageDataFromRtf(rtfData) {
      if (!rtfData) {
        return [];
      }
      const regexPictureHeader = /{\\pict[\s\S]+?({\\\*\\blipuid\s?[\da-fA-F]+)[\s}]*/
      const regexPicture = new RegExp('(?:(' + regexPictureHeader.source + '))([\\da-fA-F\\s]+)\\}', 'g');
      const images = rtfData.match(regexPicture);
      const result = [];

      if (images) {
        for (const image of images) {
          let imageType = false;

          if (image.includes('\\pngblip')) {
            imageType = 'image/png';
          } else if (image.includes('\\jpegblip')) {
            imageType = 'image/jpeg';
          }

          if (imageType) {
            result.push({
              hex: image.replace(regexPictureHeader, '').replace(/[^\da-fA-F]/g, ''),
              type: imageType
            });
          }
        }
      }

      return result;
    },
   //转换图片base64
    replaceImagesFileSourceWithInlineRepresentation( imagesHexSources) {
      console.log('imagesHexSources', imagesHexSources)
      this.pasteSrcList = []
      imagesHexSources.forEach(item => {
        const newSrc = `data:${item?.type || 'image/png'};base64,${this.convertHexToBase64(item.hex)}`;
        this.pasteSrcList.push(newSrc)
      })
    },
    convertHexToBase64(hexString) {
      return btoa(hexString.match(/\w{2}/g).map(char => {
        return String.fromCharCode(parseInt(char, 16));
      }).join(''));
    },
    // 初始化 summernote 富文本
    initSummernote(height) {
      const _this = this
      let toolBar = [
        ['style', ['bold', 'italic', 'underline', 'clear']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']],
        ['height', ['height']],
        ['table', ['table']],
        ['view', ['fullscreen', 'codeview']], // 全屏，代码视图 'undo', 'redo', 'help'
        ['insert', ['picture', 'link']]
      ]
      if (this.isHidePic) {
        toolBar = [
          ['style', ['bold', 'italic', 'underline', 'clear']],
          ['fontsize', ['fontsize']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']]
        ]
      }
      this.ele.summernote({
        lang: 'zh-CN',
        placeholder: '请输入内容',
        height,
        // focus: true,
        toolbar: toolBar,
        // 图片上传 callbackk
        callbacks: {
          onImageUpload: (files) => {
            _this.uploadImage(files[0])
          },
          onChange: (e) => {
          //富文本change事件中，用转换的base64地址替换粘贴的本地地址
            const imgSrcList = this.getRichTextImgList(e)
            // console.log('imgSrcList======', imgSrcList)
            //截取到的本地地址
            if (imgSrcList.length > 0) {
              var content = this.getRichTextContent() //富文本内容
              imgSrcList.forEach((item, index) => {
                // console.log('本地图片地址========', item)
                //循环用下标进行一对一替换地址
                content = content.replace(item, this.pasteSrcList[index]);
              })
              //最后再写入富文本
              this.ele.summernote('code', content);
              // console.log('this.pasteSrcList===', this.pasteSrcList)
            }
          }
        }
      })
    },
   //从富文本内容中，截取粘贴的不生效本地地址
   getRichTextImgList(str = '') => {
  // console.log('从富文本内容中截取img信息', str)
  const srcArr = str.split('src=') || []
  // console.log('分割src属性', srcArr)
  const imgSrcList = srcArr.filter(f => !f.includes('https://zg-new-order-model') && f.includes('file:') && (f.includes('.png') || f.includes('.jpg') || f.includes('.jpeg') || f.includes('.gif') || f.includes('.bmp'))) || []

  imgSrcList.forEach((item, index, arrar) => {
    // console.log('拆分属性', item.split('='))
    const i = item.indexOf('>')
    const i2 = item.indexOf(' ')
    if (i !== -1) {
      arrar[index] = item.slice(0, i)
    }
    if (i2 !== -1) {
      arrar[index] = item.slice(0, i2)
    }
  })
  const result = imgSrcList.map(m => {
    const list = m.split('=').filter(f => f.includes('file:')) || []
    return list[0]
  })
  // console.log('imgSrcList======', result)

  return result || []
}