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

微信扫一扫,分享到朋友圈

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

事情的经过是这样的::point_right:我们有一个考试系统,里面有个录题的功能(就是在富文本中编辑),很多情况下,我们还会有一份现成的 word 文档(就是一些题目),这样一来我们就可以从 word 中复制题目到富文本中,题目就算录入完成了。但是问题来了,如果我是图文一起复制的(图文分开是可以的),图片是显示不出来的,就像下面这样子:point_down::

所以,能不能让图片也显示出来呢?不知道,也搜不到,只能随便试试了。对了,文中的示例用的是
vue-quill-editor

富文本编辑器,不过其实这个问题到头来和 quill 本身没有什么关系:joy:。

陷入沉思

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

想法一

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

于是乎我们顺利成章的把 node 和 delta 的内容打印出来,如下图所示:point_down::

如果你不了解 delta 也没关系(可以描述富文本的一种数据格式),你只要知道里面有个 image 字段,到时输出到富文本大概会长这个样子:
<img src="https://www.tuicool.com/articles/aMrM3un/insert %E9%87%8C%E9%9D%A2%E7%9A%84 image" width="attributes 里面的 width" height="attributes 里面的 height"> 。但很遗憾的是这个 image 字段派不上用场,因为浏览器出于安全原因考虑:unamused:,我们仅仅根据
file://xxx

这个路径是访问不到本地资源的,所以我们是读不到该图片的,也就是我们最开始控制台报错的样子:

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

想法二

于是乎,我又去 quill 找了找,看看有没有更早的暴露一些接口,能够让我们更早的处理复制的内容,因为上面那个接口显然已经是处理过后的内容,我们需要再快一步:rocket:。

找啊找,找啊找,找到一个好朋友。
又很遗憾啊,我并没有找到,脑子逐渐空白:hushed:。。。

闭目养神了一会之后,实在是不知道咋下手,然后就去稍微瞟了瞟 quill 源码,看看里面做了啥子:eyes::

通过上面两个图我们可以明显的看到,我们要找的图片文件应该就在 e.clipboardData.files 里面,但是我们命:mahjong:的逻辑应该是这个 this.onPaste(range, { html, text }) ,显然这个方法并没有传入 files,应该也就没有对其做相应的处理。看起来我们似乎还要改改别人的代码才行,不过改别人的代码还是有门槛的,而且久了不好维护,所以我们先从小的着手,自己先添加个 paste 事件,看下原始的 paste 事件是否能够获取到图片文件并转成 base64,如果可以的话再继续深入:sunglasses:。

想法三

于是乎,我们在富文本中添加了自己的 paste 事件,并将结果打印出来,如下图所示:

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

:grimacing:感动 ing,图片显示出来了,于是乎直接改了下 quill 的包代码(这个 quill 和刚才上面展示的不是一个版本),就像下面这样:

然后我们尝试粘贴,结果如下:

卧槽,:ox::beer:,居然可以,Amazing! 但是好像有哪里不对劲,仔细一看,那个图片居然自己把文字也加上去了,这是什么骚操作,刚才浏览器预览不是还可以的吗:neutral_face:?思来想去 。。。。。。不卖关子了,其实刚才就不行了,让我们把时间往前拨一点,回到图片预览的地方,这回我把背景变成白色了,你就会发现:

这尼玛:raised_hands:,一开始就不对(所以和 quill 也就没啥关系了),害我写了半天。万马奔腾之后,还是得静静,想想为啥文字会混入图片呢?这个真不懂,搜了也没有(可能是因为剪贴板的实现机制吧),然后事情就告一段落了(原谅我这么草率:sweat_smile:),因为源头错了,就没有必要往下进行了。

未果而终

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

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

神奇:flushed:,这里的图片有两种格式,而且都能正确显示,可惜我们不能仅凭这个路径去读取图片,所以还是木有结果。这里又顺便把 word 另存为成 .htm 文件,打开导出的 html 发现其中的图片也是 gif 格式的,就像下图这样:

不明觉厉:flushed:。。。

最后的最后,我还特意去试了下其他产品的编辑器,看看效果怎么样,还好也不行:

不过意外的发现掘金自身的 markdown 居然可以粘贴图文,就像下面这样子:

刚好和我说的 base64 互补,不过还好结果是一样的,图片一样会包含着文字,这样我就放心了,哈哈哈哈:grin::grin::grin:。。。。

:smirk: 听说还能把 word 传给后端解析,再给回前端展示,不过好像有点得不偿失。

:hibiscus:如果有大佬知道奇淫巧技的话,欢迎在下面留言。。。

微信扫一扫,分享到朋友圈

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

无代码来了,还要程序员吗?

上一篇

菜鸟驿站全国升级:继续免费保管、不带手机也能秒取快递

下一篇

你也可能喜欢

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

长按储存图像,分享给朋友