【wangEditor 5】在线解析本地word，将内容展现在wangEditor中

最近有个问题，在word中复制的多张图片，或者同时复制了图片和文字，图片粘贴到编辑器中不显示。

原因很简单：浏览器无法直接访问本地资源下的文件，切记这一点，不要试图用浏览器直接访问你本地文件。因为从技术角度来讲，这样是非常危险的，这也是我在尝试了一天后下班在路上才反应过来的。

Not allowed to load local resource: 
file:///C:/Users/ADMINI~1/AppData/Local/Temp/msohtmlclip1/01/clip_image002.jpg

所以在沟通后，需求就从直接复制变成了在线解析word，这样根据我前几天的经验，瞬间就变得简单了很多

技术点

FileReader

FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件（或原始数据缓冲区）的内容，使用 File 或 Blob 对象指定要读取的文件或数据。
我们用到了FileReader的readAsArrayBuffer方法，该方法的作用为：启动读取指定的 Blob 或 File 内容，当读取操作完成时，返回一个 ArrayBuffer 对象以表示所读取文件的数据
使用方法：

		const reader = new FileReader();
        reader.onload = function (evt: any) {
   
   //当文件读取完毕后
          console.log(evt)
        }
        reader.readAsArrayBuffer(file);// 启动读取指定的 Blob 或 File 内容

mammoth

这个依赖会将word解析成HTML，真的是超级好用，安装

npm install mammoth --save

思路

1、新建一个input标签，设置type为file,隐藏这个标签
2、在wangEditor注册一个自定义菜单，点击它的时候调用input，进行文件选择上传
3、使用FileReader读取对象
4、使用mammoth将word解析成html
5、将HTML展现在富文本编辑器上

操作

1、新建一个input标签，设置type为file,隐藏这个标签，设置只能选择word文档，通过change事件获取选择的文件，使用mammoth解析后将HTML展现在富文本编辑器上

<input v-show="false" id="changeFile" ref="fileRef" type="file" @change="