一、项目需求

通过chrome浏览器保存的mhtml文件，在页面中的富文本编辑器中原封不动的显示出来，并且可以编辑。在编辑内容之后再把内容原封不动的发送给后台，包括css样式，body内容，附件等。

二、富文本编辑器选择

首先说下，在编辑器的选择上浪费了很多时间。第一个选择是轻量级的wangEditor，发现处理之后的mhtml的body放到编辑器之后是html代码，查看官方文档还是没有找到相关的方法。最后在查找其他的富文本编辑器，在tinymce的官网上找到相对应的例子。就直接选择了tinymce。感觉说的不是很明白，下面直接把需求贴出来。

这是网站内容

1655883481223.jpg

这是想要的效果

1655883525093.jpg

三、实现步骤

（1）解析mhtml文件

通过其他同事解析eml文件用到了第三方插件emailjs-mime-parser，然后我这边直接拿来用。
emailjs-mime-parser解析:

let reader = new FileReader();
      reader.readAsText(e.target.files[0], "UTF-8");
      reader.onload = function (evt) {
        let mhtmlSource = evt.target.result;
        that.$store.commit(
          "armsLibrary/setMhtmlSourceAndAnalysis",
          mhtmlSource
        );

import mimeParser from "emailjs-mime-parser";
setMhtmlSourceAndAnalysis(state, v) {
      console.log("mime解析：", mimeParser(v));
      let mhtmlSour = mimeParser(v);
}

通过对mhtml文件解析之后，mhtml所有代码生成相对应的数据格式。看下图

1655883886708.jpg
header中保存的是mhtml的头，childNodes中保存着解析之后的所有内容（包括css，附件，body）。childNodes[0]就是mhtml文件的body内容，其他的就是css、附件、图片的内容。下面是childNodes中的内容
1655884261357.jpg

（2）根据类型进行对content解析

首先解析childNodes[0]中的content`,内容为html代码

analysisTextBody(state, v) {
      let body = v?.childNodes[0]?.content;
      // state.tmpHTML = state.utf8Enc.decode(body)
      state.tmpHTML = new TextDecoder.decode(body)
      console.log("tmpHTML:",state.tmpHTML);
    }

如图所示

1655885028540.jpg

解析其他childNodes中的content

根据不同的contentType进行解析，生成blobUrl，后面会根据blobUrl对state.tmpHTML中的cid进行替换。

childNodes[index].blobUrl = URL.createObjectURL(new Blob([childNodes[index].content], {type: childNodes[index].contentType.value}))

温馨提示：这里解析的时候踩了大坑。emailjs-mime-parser插件解析的image竟然是错误的，因为contentTransferEncoding为base64。所以需要根据raw截取进行手动截取。说明下childNodes中的raw就是源代码块

if (childNodes[index].contentTransferEncoding.value == "base64") {
          let base64Body = childNodes[index].raw.slice(childNodes[index].raw.indexOf("\n\n"))
          let binnaryBody = window.atob(base64Body)
          let bufferBody = new Array(binnaryBody.length)
          for (let i = 0; i < binnaryBody.length; i++) {
            bufferBody[i] = binnaryBody.charCodeAt(i)
          }
          childNodes[index].blobUrl = URL.createObjectURL(new Blob([new Uint8Array(bufferBody)], {type: childNodes[index].contentType.value}))
        }

四、生成对照Map

说明下，我这是编辑富文本之后，还要重新把blobUrl进行与cid的替换

      if (childNodes[index].headers.hasOwnProperty("content-id")) {
          childNodes[index].cid = childNodes[index].headers["content-id"][0].value
          state.cidMap[childNodes[index].headers["content-id"][0].value] = childNodes[index]
          state.blobUrlMap[childNodes[index].blobUrl] = childNodes[index]
        }
        if (childNodes[index].headers.hasOwnProperty("content-location")) {
          childNodes[index].lid = childNodes[index].headers["content-location"][0].value
          state.cidMap[childNodes[index].headers["content-location"][0].value] = childNodes[index]
          state.blobUrlMap[childNodes[index].blobUrl] = childNodes[index]
        }

到这一步，基本上就把所有mhtml内容解析完毕。下面就是把state.tmpHTML中的href="cid:....."替换掉

for (const key in state.cidMap) {
        if (Object.hasOwnProperty.call(state.cidMap, key)) {
          state.tmpHTML = state.tmpHTML.replace(key, state.cidMap[key].blobUrl)
        }
      }

到这一步基本上就是大功告成了。剩下的就是对富文本编辑器内容的设置了。但是又有坑啊。真是服了。接着记录

五、解析后的mhtml，设置到tinymce中

（1）设置内容到tinymce中

这一步还是比较容易的

tinymce.activeEditor.execCommand(
        "InsertHTML",
        false,
        this.$store.state.armsLibrary.blobHTML
      );

（2）设置css样式

这一步真是坑啊。因为css的blobUrl已经替换完毕，没想到竟然没有加载。最后开始看官方文档，发现还需要特别设置

window.tinymce.activeEditor.dom.loadCSS(childNodes[index].blobUrl)

这样设置才能够生效，也是服了。

六、总结

这里面的坑真的不少，感谢公司大佬帮助，image不生效，然后开始算十进制发现解析出来的content不对。接着进行自己进行解析为二进制，然后生成BlobUrl。最后就是tinymce使用的问题了。不多说了。都在上面步骤之中。然后想说的是，这只是把mhtml解析显示到tinymce中，下一步就是编辑富文本之后再换成mhtml代码块。。。。。。。