search

kensnyder / quill-image-drop-module

A module for Quill rich text editor to allow images to be pasted and drag/dropped into the editor.
214 stars 78 forks source link

copy img dom but paste twice #7

Open unliar opened 6 years ago

unliar commented 6 years ago

move your mouse on a picture in chrome , use the right-click mouse menu option, copy img, then paste into editor，two different img src will show. one img src is Original source , another is base64 data.

env: chrome, https://plnkr.co/edit/ubVmPkBjqQESsefM3JrT?p=preview win10

bwbroersma commented 6 years ago

I guess because there is no evt.preventDefault(); after line 57. Which browsers need the image paste functionality, since it seems the Chrome (v 63.0.3239.132) handles pasting.

frankyvij commented 6 years ago

Is there a solution for this? Adding evt.preventDefault() after line 57 does not work.

frankyvij commented 6 years ago

I actually made it work by wrapping changing handlePaste function to the following:

    handlePaste(evt) {
        evt.preventDefault();

        if (evt.clipboardData && evt.clipboardData.items && evt.clipboardData.items.length) {
            this.readFiles(evt.clipboardData.items, dataUrl => {
                setTimeout(() => this.insert(dataUrl), 0);
            });
        }
    }
chiptoe commented 2 years ago

@frankyvij I can confirm, I had similar problem, see the resulting dom:

image

I also had to comment out selection checking line 50 - the problem was that quill returned selection as an object with valid index and insert was never called. Therefore I use same code as @frankyvij .

Browser user agent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko)"