一、项目需求
通过chrome浏览器保存的mhtml文件，在页面中的富文本编辑器中原封不动的显示出来，并且可以编辑。在编辑内容之后再把内容原封不动的发送给后台，包括css样式，body内容，附件等。
二、富文本编辑器选择
首先说下，在编辑器的选择上浪费了很多时间。第一个选择是轻量级的wangEditor，发现处理之后的mhtml的body放到编辑器之后是html代码，查看官方文档还是没有找到相关的方法。最后在查找其他的富文本编辑器，在tinymce的官网上找到相对应的例子。就直接选择了tinymce。感觉说的不是很明白，下面直接把需求贴出来。
这是网站内容
这是想要的效果
三、实现步骤
（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所有代码生成相对应的数据格式。看下图
header中保存的是mhtml的头，childNodes中保存着解析之后的所有内容（包括css，附件，body）。childNodes[0]就是mhtml文件的body内容，其他的就是css、附件、图片的内容。下面是childNodes中的内容
（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);
}
如图所示
解析其他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代码块。。。。。。。
