处理从word粘贴图片不显示问题

src/components/richtext/rich-edit.vue

@@ -75,13 +75,99 @@ const handleCreated = (editor) => {
 
 const customPaste = (editor, event, callback) => {
   let htmlData = event.clipboardData.getData('text/html') // 获取粘贴的 html
+  console.log(htmlData)
+  let rtfData = event.clipboardData.getData('text/rtf') // 获取粘贴的 html
+  console.log('-------------- rtfData --------------', rtfData)
+
   htmlData = htmlData.replace(/<\/?span[^>]*>/g, '');
   htmlData = htmlData.replace('<img', '<img referrerpolicy="no-referrer"')
+
+  // 处理 word 内图片
+  // 从html内容中查找粘贴内容中是否有图片元素，并返回img标签的属性src值的集合
+  const imgSrcs = htmlData.match(/<img [^>]*src=['"]([^'"]+)[^>]*>/g);
+  // 如果有
+  if (imgSrcs && Array.isArray(imgSrcs) && imgSrcs.length) {
+    console.log('imgSrcs', imgSrcs)
+    // 从rtf内容中查找图片数据
+    const rtfImageData = extractImageDataFromRtf(rtfData);
+    console.log('rtfImageData', rtfImageData)
+    // 如果找到
+    if (rtfImageData.length) {
+      // TODO：此处可以将图片上传到自己的服务器上,
+
+      // 执行替换：将html内容中的img标签的src替换成ref中的图片数据，如果上面上传了则为图片路径
+      htmlData = replaceImageFile(htmlData, imgSrcs, rtfImageData)
+      console.log('+++++++++++++++++++ replace after +++++++++++++++++++', htmlData)
+    }
+  }
+
   editor.dangerouslyInsertHtml(htmlData);
   event.preventDefault()
   callback(false)
 }
 
+/**
+ * 从rtf内容中匹配返回图片数据的集合
+ * @param rtfData
+ * @return Array
+ */
+const 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 = ref([])
+  if (images) {
+    for (const image of images) {
+      const imageType = ref(false)
+      if (image.includes('\\pngblip')) {
+        imageType.value = 'image/png'
+      } else if (image.includes('\\jpegblip')) {
+        imageType.value = 'image/jpeg'
+      }
+      if (imageType.value) {
+        result.value.push({
+          hex: image.replace(regexPictureHeader, '').replace(/[^\da-fA-F]/g, ''),
+          type: imageType.value
+        });
+      }
+    }
+  }
+  return result.value;
+}
+
+/**
+ * 将html内容中img标签的属性值替换
+ * @param htmlData html内容
+ * @param imageSrcs html中img的属性src的值的集合
+ * @param imagesHexSources rtf中图片数据的集合，与html内容中的img标签对应
+ * @param isBase64Data 是否是Base64的图片数据
+ * @return String
+ */
+const replaceImageFile = (htmlData, imageSrcs, imagesHexSources, isBase64Data = true) => {
+  if (imageSrcs.length === imagesHexSources.length) {
+    for (let i = 0; i < imageSrcs.length; i++) {
+      const newSrc = isBase64Data
+        ? `<img src='data:${imagesHexSources[i].type};base64,${convertHexToBase64(imagesHexSources[i].hex)}'/>`
+        : imagesHexSources[i]
+      htmlData = htmlData.replace(imageSrcs[i], newSrc);
+    }
+  }
+  return htmlData;
+}
+
+/**
+ * 十六进制转base64
+ */
+const convertHexToBase64 = (hexString) => {
+  return btoa(hexString.match(/\w{2}/g).map(char => {
+    return String.fromCharCode(parseInt(char, 16));
+  }).join(''));
+}
+
+
 watch(() => props.modelValue, () => {
   valueHtml.value = props.modelValue
 })