Paste images

[ncammarata]

It would be nice if we could paste an image on the clipboard instead of having to save it to a file and upload from there.

[zD12]

You should view issue #122. They plan on adding 'drag-n-drop' features to Quill, but it was posted a while back on May 25, 2014.

[dandv]

👍 super handy. Became addicted to pasting images from clipboard after using it in Slack, GitHub, StackOverflow.

I can paste images from the same page, but not from the clipboard.

I've listed other WYSIWYG editors that support pasting images in this comparison.

[kensnyder]

Here is a demo of my plugin for image drag/drop and paste for Quill. If there is interest I can publish to npm or submit a pull request to add to Quill core. Also demoed there is a plugin for image resizing.

[htsh]

@kensnyder would love it if the drag/drop and resize plugins were made available. thanks!

[kensnyder]

These plugins are now available on npm: quill-image-resize-module and quill-image-drop-module. Contributions are welcome.

[idoromm]

@kensnyder any plans on making image pasting module as well?
I think allowing image pasting is as useful as drag-n-drop to some people. Thanks!

[johnozbay]

Here's what I'm using to add very basic support for pasting images from clipboard. It uses the Clipboard API. This will return an image element, which quill parses and inserts inline into the editor.

It can be improved, but for my use case this works.
You can simply add the following into your js file and it should work.
Feel free to convert to a module if you've got time 🍻

Tested in Chrome and Firefox latest (but you should still keep an eye out for browser support as usual)

var IMAGE_MIME_REGEX = /^image\/(p?jpeg|gif|png)$/i;
var loadImage = function (file) {
    var reader = new FileReader();
    reader.onload = function(e){
        var img = document.createElement('img');
        img.src = e.target.result;
        var range = window.getSelection().getRangeAt(0);
        range.deleteContents();
        range.insertNode(img);
    };
    reader.readAsDataURL(file);
};

document.onpaste = function(e){
    var items = e.clipboardData.items;

    for (var i = 0; i < items.length; i++) {
        if (IMAGE_MIME_REGEX.test(items[i].type)) {
            loadImage(items[i].getAsFile());
            return;
        }
    }

    // Normal paste handling here
}

Source : https://gist.github.com/dusanmarsa/2ca9f1df36e14864328a2bb0b353332e

[hardythomas]

@johnozbay, please attribute code if you pulled it from somewhere.

Also, edit your post to include an important line you missed in your snippet:
var IMAGE_MIME_REGEX = /^image\/(p?jpeg|gif|png)$/i;

Thank you for getting this out here!

[johnozbay]

@hardythomas at the time of posting this I copied the code from the project I was using it in. The lack of attribution was without any bad intention, but merely an oversight in a busy day. I apologize.
Added the source & updated snippet with an edit now. Thanks for the heads up, and keeping me warned 🙏🏻

[hardythomas]

No worries. I didn't think it was with bad will ;) just hoping people get credit where credit is due   Sent: Sunday, June 24, 2018 at 4:10 AM From: "John Ozbay" <notifications@github.com> To: quilljs/quill <quill@noreply.github.com> Cc: hardythomas <hardy.thomas@mail.com>, Mention <mention@noreply.github.com> Subject: Re: [quilljs/quill] Paste images (#137) @hardythomas at the time of posting this I copied the code from the project I was using it in. The lack of attribution was without any bad intention, but merely an oversight in a busy day. I apologize. Added the source & updated snippet with an edit now. Thanks for the heads up, and keeping me warned 🙏🏻 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[edeych]

@johnozbay this code produces double paste in most recent Firefox. Without the polyfill, pasting images directly into quill works. But Chrome still requires your polyfill.