React-Quill中图片粘贴的兼容问题

上一篇文章里说道quill在谷歌浏览器中只有部分功能可用，由于是一个国外私人写的模块，现在没有再优化了。我自己尝试改了一下，先说一下我自己的优化，也希望前端大佬给出优化建议。

看一下quill-image-drop-module的源码，内容不多，只有五个函数，一个构造函数，两个粘贴删除监听函数，以及两个功能函数。

源码地址：https://github.com/kensnyder/quill-image-drop-module

我只修改了handlePaste这个粘贴函数，下面是修改后的代码。

handlePaste(evt) {    if (evt.clipboardData && evt.clipboardData.items && evt.clipboardData.items.length) {        this.readFiles(evt.clipboardData.items, dataUrl => {            const userAgent = navigator.userAgent; // 取得浏览器的userAgent字符串            if (userAgent.indexOf('Firefox') > -1) {                const selection = this.quill.getSelection();                if (selection) {                  // we must be in a browser that supports pasting (like Firefox)                  // so it has already been placed into the editor                } else {                  // otherwise we wait until after the paste when this.quill.getSelection()                  // will return a valid index                  setTimeout(() => this.insert(dataUrl), 0);                }           } else {               setTimeout(() => this.insert(dataUrl), 0);           }        });    }}

前文说道，火狐浏览器完美支持，是因为火狐自带粘贴图片功能，而谷歌只支持一半。我们看到模块作者在粘贴图片函数中进行了判断，如果没有这段判断，火狐浏览器会出现同时粘贴两张一样图片的情况，而谷歌浏览器则能截取浏览器外的图片粘贴。这是因为quill编辑器本身会有部分粘贴功能。

于是我进行了浏览器的判断，如果是火狐浏览器，则进行判断，保证只粘贴一张图片。如果是谷歌，则不进行判断，直接粘贴进去。但这样就引出了新的问题，就是如果右键复制网页中的图片，看到在谷歌浏览器中除图片外，会多一条链接地址，这是因为quill默认的功能，我试着在另2个函数readFiles和insert中筛选掉，但没找到解决办法。

虽然还存在问题，但至少功能都实现了，而且实际业务中多数是使用微信或qq的截图然后贴入，这种情况不会有链接，但在开头会有一个空行。

至于Safari浏览器，还是完全不支持，我试了知乎的富文本框，也同样不支持Safari，所以就不考虑了。

我们浏览器调试可以看到贴入的图片是base64编码的，如果直接存入数据库会很占空间，这个下一篇文章会说我的解决办法，同时会介绍一个图片放大浏览的组件。

这篇就先介绍到这。前端小白，刚刚入门，请多多指教。