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

夜深人静敲代码

于 2017-12-19 00:07:27 发布

阅读量3k

点赞数

分类专栏：前端 react 文章标签：前端富文本编辑器

本文链接：https://blog.youkuaiyun.com/song279811799/article/details/78838390

版权

本文讲述了在React-Quill富文本编辑器中遇到的图片粘贴兼容问题，主要涉及Chrome和Firefox。原作者未对粘贴图片功能做完整优化，经过修改，现在火狐浏览器可以确保只粘贴一张图片，而Chrome仍会粘贴额外的链接。尽管存在一些未解决的问题，如Chrome中复制网页图片会带链接，但大多数实际场景（如微信、QQ截图）不受影响。接下来的文章将讨论如何处理图片的base64编码以节省数据库空间，并介绍一个图片预览组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇文章里说道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('