关于复制 word 图文到富文本中的问题

原由

事情的通过是这样的：👉咱们有一个考试系统，里面有个录题的功能（就是在富文本中编辑），不少状况下，咱们还会有一份现成的 word 文档（就是一些题目），这样一来咱们就能够从 word 中复制题目到富文本中，题目就算录入完成了。可是问题来了，若是我是图文一块儿复制的（图文分开是能够的），图片是显示不出来的，就像下面这样子👇：

因此，能不能让图片也显示出来呢？不知道，也搜不到，只能随便试试了。对了，文中的示例用的是 vue-quill-editor 富文本编辑器，不过其实这个问题到头来和 quill 自己没有什么关系😂。

陷入沉思

首先明确下问题的初衷：⭕就是让富文本可以显示从 word 复制过来的图文信息中的图片，该图片要么是前端转成 base64 格式，要么是传给后端返回一个 src 来展现，这里以 base64 举例。

想法一

最初的想法就是各类搜索罗🤔，而后就。。。未果而终。那。。。就只能本身动手丰衣足食了。 常规的第一个想法是看看编辑器自己有没有暴露什么接口，让你能够本身处理一下复制的内容，找了一下，是有的，心理窃喜😁，以下面几张图所示：

因而乎咱们顺利成章的把 node 和 delta 的内容打印出来，以下图所示👇：

若是你不了解 delta 也不要紧（能够描述富文本的一种数据格式），你只要知道里面有个 image 字段，到时输出到富文本大概会长这个样子： <img src="insert 里面的 image" width="attributes 里面的 width" height="attributes 里面的 height">。但很遗憾的是这个 image 字段派不上用场，由于浏览器出于安全缘由考虑😒，咱们仅仅根据 file://xxx 这个路径是访问不到本地资源的，因此咱们是读不到该图片的，也就是咱们最开始控制台报错的样子：

不过这里我仍是先随便复制了一个 base64 格式的图片替换这个 image 字段，图片是能正常显示的。那么接下来咱们的目的就是想办法读取到图文中的图片。

想法二

因而乎，我又去 quill 找了找，看看有没有更早的暴露一些接口，可以让咱们更早的处理复制的内容，由于上面那个接口显然已是处理事后的内容，咱们须要再快一步🚀。找啊找，找啊找，找到一个好朋友。又很遗憾啊，我并无找到，脑子逐渐空白😯。。。

闭目养神了一会以后，实在是不知道咋下手，而后就去稍微瞟了瞟 quill 源码，看看里面作了啥子👀：

经过上面两个图咱们能够明显的看到，咱们要找的图片文件应该就在 e.clipboardData.files 里面，可是咱们命🀄的逻辑应该是这个 this.onPaste(range, { html, text })，显然这个方法并无传入 files，应该也就没有对其作相应的处理。看起来咱们彷佛还要改改别人的代码才行，不过改别人的代码仍是有门槛的，并且久了很差维护，因此咱们先从小的着手，本身先添加个 paste 事件，看下原始的 paste 事件是否可以获取到图片文件并转成 base64，若是能够的话再继续深刻😎。

想法三

因而乎，咱们在富文本中添加了本身的 paste 事件，并将结果打印出来，以下图所示：

咱们如愿以偿的拿到了 base64 格式的图片，而后复制这段 base64 在浏览器中打开

😬感动 ing，图片显示出来了，因而乎直接改了下 quill 的包代码（这个 quill 和刚才上面展现的不是一个版本），就像下面这样：

而后咱们尝试粘贴，结果以下：

卧槽，🐂🍺，竟然能够，Amazing! 可是好像有哪里不对劲，仔细一看，那个图片竟然本身把文字也加上去了，这是什么骚操做，刚才浏览器预览不是还能够的吗😐？思来想去🤔。。。。。。不卖关子了，其实刚才就不行了，让咱们把时间往前拨一点，回到图片预览的地方，这回我把背景变成白色了，你就会发现：

这尼玛🙌，一开始就不对（因此和 quill 也就没啥关系了），害我写了半天。万马奔腾以后，仍是得静静，想一想为啥文字会混入图片呢？这个真不懂，搜了也没有（多是由于剪贴板的实现机制吧），而后事情就告一段落了（原谅我这么草率😅），由于源头错了，就没有必要往下进行了。

未果而终

虽然结束的有点忽然，可是回过头想一想，若是图片是对的，这个功能实现起来好像不难，你能实现的话，框架也许就帮你实现了，框架没有处理这种图文逻辑可能就说明这地方有坑，须要警戒。

另外，若是你看的再仔细点，你就会发现咱们读取的图片是 png 格式的，而本地资源 file://xxx/clip_image002.gif 确是 gif 的，这就很奇怪了，不过从文件的命名 clip_image002.gif 来看，应该大概可能也许是剪贴板对其作了某种处理吧😂，至于作了啥，就不得而知了。这里顺便打开了这个 file 路径的文件夹，里面的内容以下图所示：

神奇😳，这里的图片有两种格式，并且都能正确显示，惋惜咱们不能仅凭这个路径去读取图片，因此仍是木有结果。这里又顺便把 word 另存为成 .htm 文件，打开导出的 html 发现其中的图片也是 gif 格式的，就像下图这样：

不明觉厉😳。。。

最后的最后，我还特地去试了下其余产品的编辑器，看看效果怎么样，还好也不行：

不过意外的发现掘金自身的 markdown 竟然能够粘贴图文，就像下面这样子：

恰好和我说的 base64 互补，不过还好结果是同样的，图片同样会包含着文字，这样我就放心了，哈哈哈哈😁😁😁。。。。

😏 据说还能把 word 传给后端解析，再给回前端展现，不过好像有点得不偿失。

🌺若是有大佬知道奇淫巧技的话，欢迎在下面留言。。。