Option to insert an image from a URL #893

jasongisstl · 2016-08-26T12:18:06Z

The Image button on the toolbar allows you to insert an image from your local machine.
It would be brilliant if this could be extended to also allow an image URL to be provided.

It is possible to drag & drop an image from the web, but this may not be obvious to all users. Also, in our particular case, we have custom drag & drop handling which prevents this from working in our applications.

Version: 1.0.0-rc2

P.S. Thank you for all your hard work on 1.0 - it really is fantastic.

laosb · 2017-01-23T12:51:37Z

Any progress on this?

CoenWarmer · 2017-01-24T08:33:36Z

Also interested in this :)

dennisdebel · 2017-02-22T14:28:12Z

[edit]Best Approach is something like the adding a matcher to the clipboard module, watching for copypasted urls and converting them to images (new Delta().insert({image: url}); works) like the code found here: #109 by @schneidmaster
Couldnt get it to works for images still tho...learning...

[edit 2] this custom matcher converts urls to links and in case they link to image, converts the urls to inline images (put it in quill.on('text-change', function(delta, oldDelta, source) {)


var Delta = Quill.import('delta');

//convert img links to actual images
quill.clipboard.addMatcher(Node.TEXT_NODE, function(node, delta) {
    var regex = /https?:\/\/[^\s]+/g;
        if(typeof(node.data) !== 'string') return;
            var matches = node.data.match(regex);

            if(matches && matches.length > 0) {
                var ops = [];
                var str = node.data;

                matches.forEach(function(match) {
                     var split = str.split(match);
                     if(match.match(/\.(png|jpg|jpeg|gif)$/)!=null){
                         var beforeLink = split.shift();                     
                         ops.push({ insert: beforeLink });
                         ops.push({ insert:{image: match}, attributes: { link: match } 
                      });

                    str = split.join(match);                    
                    } else { //if link is not an image
                        var beforeLink = split.shift();
                        ops.push({ insert: beforeLink });                        
                        ops.push({ insert: match, attributes: { link: match } 
                    }); 
                        str = split.join(match);
                    }                                                     
    });
                ops.push({ insert: str });
                delta.ops = ops;
             }                   
    return delta;
});

Obviously the wrong approach > I tried to implement this in the form of a custom module, but my JS skills suck. Behaviour im looking for is to replace all urls containing images to 'inline' images (like the etherpad image plugin). I made (read: copypasta) an example that sorta works here: http://codepen.io/anon/pen/PpYjxG
In the example, type a bit and Copy/Paste an image url in the editor field and it will appear as inline image. Only after that the ability to edit/type stops, which must be something obvious, but as I said..major noob...

tannerjt · 2017-04-23T21:17:47Z

Would love to see this as well. As a side note, this was how images were handled in the early stages of QuillJS. Any reason why this was removed?

masza · 2017-05-11T16:33:34Z

I don't understand why there is base64 upload images and no support for third-party image upload. This is VERY important!

cuduy197 · 2017-05-17T01:00:15Z

Still no update :(

McSneaky · 2017-05-24T23:52:14Z

I got it working like this:
https://stackoverflow.com/questions/43857373/quill-editor-vuejs2-image-upload-base64-image-to-url
Not directly from clipboard tho

Matoo125 · 2017-07-03T12:39:13Z

I think here #863 (comment) it is written pretty well. All you need to do is to create custom handler

vhq2016 · 2017-11-24T08:36:14Z

+6666

oliveratgithub · 2018-02-12T21:14:25Z

+1

tedtoy · 2018-02-13T07:31:56Z

I too would like to make public my desire for such a feature.

rodolfosaraiva · 2018-04-19T14:55:33Z

+1

Vice93 · 2018-07-18T23:41:43Z

+1 how is this not a feature yet?

davek1979 · 2018-09-05T08:20:00Z

Could someone from the team maybe shed some light on this please? This feature is really, REALLY needed.

owensco · 2018-09-28T17:40:35Z

+1 my team would love this feature.

alexjustesen · 2018-11-02T13:29:48Z

For what it's worth... would be really really nice to have...

alexandercsmith · 2019-02-16T21:20:16Z

Keeping the fire alive for this request 🔥

oliveratgithub · 2019-02-17T02:34:08Z

I toss some bricks into that fire so it keeps burning longer

repat · 2019-02-27T20:59:28Z

We got it working by extracting the base64 encoded image, storing it on the hard drive and replacing the src="data..." code with src="/folder/file..." but quill doesn't display the picture when the HTML is loaded with dangerouslyPasteHTML the next time we open it, see #1449.

+1 would also like to see this feature built-in

Gib-git · 2019-04-15T18:19:10Z

var toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction

            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'align': [] }],

            ['clean'],                                         // remove formatting button
            ['image']
        ];

        var quill = new Quill('#editor', {
            theme: 'snow',
            modules: {
                toolbar: {
                    container: toolbarOptions,
                    handlers: {
                        image: imageHandler
                    }
                }
            },
        });

        function imageHandler() {
            var range = this.quill.getSelection();
            var value = prompt('What is the image URL');
            if(value){
                this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER);
            }
        }

jiangqiming · 2019-04-19T15:39:50Z

Any progress on this?

啥

siberiadev · 2019-04-23T12:39:39Z

Hey there! Any progress?

repat · 2019-04-23T13:18:10Z

@siberiadev in case you're working with laravel, for extracting the image you can use extract_inline_img() from my package here: https://packagist.org/packages/repat/laravel-helper

Or just have a look at the function here and extract what you need.

In terms of displaying I haven't seen any progress.

siberiadev · 2019-04-23T13:25:02Z

@repat, thank you. I use Node.js for backend.

repat · 2019-04-23T13:41:09Z

PHP and Laravel (MVC, similar to express I think) is fairly eary to read so you could:

Have a look at the PHP documentation e.g. https://www.php.net/manual/de/function.preg-match-all.php to understand how my function extracts the base64 encoded data
With https://regex101.com you can translate the Regular Expressions (e.g. /src=\"data:image\/([a-zA-Z]*);base64,([^\"]*)\"/ to from PCRE to EcmaScript
Other functions like str_finish come from the official Laravel helpers: https://laravel.com/docs/5.8/helpers

=> Translate it into a js function

Gib-git · 2019-04-23T14:16:48Z

I posted a solution above

jtlimson · 2019-07-05T04:54:57Z

This works like a charm

var toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction

            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'align': [] }],

            ['clean'],                                         // remove formatting button
            ['image']
        ];

        var quill = new Quill('#editor', {
            theme: 'snow',
            modules: {
                toolbar: {
                    container: toolbarOptions,
                    handlers: {
                        image: imageHandler
                    }
                }
            },
        });

        function imageHandler() {
            var range = this.quill.getSelection();
            var value = prompt('What is the image URL');
            if(value){
                this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER);
            }
        }

chrisbmoore · 2020-03-25T04:19:07Z

For anyone coming here using ngx-quill:

import { QuillModules, defaultModules } from 'ngx-quill';

export class MyComponent {

    quillModules: QuillModules = {
    toolbar: {
      container: defaultModules.toolbar, 
      handlers: {
        image: imageHandler
      }
    }
  };

}

imageHandler(this: any) {
    const tooltip = this.quill.theme.tooltip;
    const originalSave = tooltip.save;
    const originalHide = tooltip.hide;
    tooltip.save = function(this: any) {
      const range = this.quill.getSelection(true);
      const value = this.textbox.value;
      if (value) {
        this.quill.insertEmbed(range.index, 'image', value, 'user');
      }
    };
    // Called on hide and save.
    tooltip.hide = function (this: any) {
       tooltip.save = originalSave;
       tooltip.hide = originalHide;
       tooltip.hide();
    };
    tooltip.edit('image');
    tooltip.textbox.placeholder = "Embed URL";
  }

<quill-editor [modules]="quillModules"></quill-editor>

pburrows · 2020-03-28T13:19:56Z

@chrisbmoore this works great for ngx-quill! However, it clobbers the tooltip saves for links and videos. Need to set the original save back when done. Instead of this:

function imageHandler(this: any) {
  const tooltip = this.quill.theme.tooltip;
  tooltip.save = function (this: any) {
    const range = this.quill.getSelection(true);
    const value = this.textbox.value;
    if (value) {
      this.quill.insertEmbed(range.index, 'image', value, 'user');
    }
  }
  tooltip.edit('image');
}

do something like this:

imageHandler(this: any) {
    const tooltip = this.quill.theme.tooltip;
    const originalSave = tooltip.save;
    tooltip.save = function(this: any) {
      const range = this.quill.getSelection(true);
      const value = this.textbox.value;
      if (value) {
        this.quill.insertEmbed(range.index, 'image', value, 'user');
      }
      tooltip.save = originalSave;
    };
    tooltip.edit('image');
  }

chrisbmoore · 2020-03-29T18:34:27Z

@pburrows You're right, the original save function should be reset. Thanks!

digilist · 2020-08-05T11:04:55Z

@pburrows @chrisbmoore If the tooltip is closed without clicking "Save" the original save function is not restored, as the save method is not called. Do you have any idea how to solve this? I did not find some callback that is called in that case.

Update: I found a solution myself by overriding tooltip.hide() with the restore code:

tooltip.hide = function(this: any) {
    tooltip.save = originalSave;
    tooltip.hide = originalHide;
    tooltip.hide();
};

chrisbmoore · 2020-08-05T20:43:33Z

@digilist Thanks for the correction! Yep your solution makes sense and I'll add it to my code.

joeabn · 2020-11-21T19:02:43Z

Any Update on this ?

connor4312 · 2021-03-18T05:24:05Z

I tried to find a better way to do this... the tooltips in Quill are hidden quite effectively so that consumers can't extend on them cleanly.

Anyway, one more bit that you'll need to customize the label is this CSS snippet:

.ql-tooltip[data-mode=image]::before {
  content: "Enter image URL:";
}

tranduclinh2067 · 2022-02-17T16:18:45Z

I tried to find a better way to do this... the tooltips in Quill are hidden quite effectively so that consumers can't extend on them cleanly.

Anyway, one more bit that you'll need to customize the label is this CSS snippet:
.ql-tooltip[data-mode=image]::before {
  content: "Enter image URL:";
}

It doesn't work

Milutin-P · 2022-03-03T09:14:02Z

Other solutions did not work for me :(
I'm using a "react-quill": "^1.3.5",
So I wrote it like this:

function imageHandler() {
  const { tooltip } = this.quill.theme;
  const originalSave = tooltip.save;
  const originalHide = tooltip.hide;

  tooltip.save = () => {
    const range = this.quill.getSelection(true);
    const { value } = tooltip.textbox;
    if (isValidURL(value)) { //isValidURL is a validator
      this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER);
    } else {
      // error message handler
    }
  };

  // Called on hide and save.
  tooltip.hide = () => {
    tooltip.save = originalSave;
    tooltip.hide = originalHide;
    tooltip.hide();
  };

  tooltip.edit('image');
  tooltip.textbox.placeholder = 'Embed URL';
}

const modules = {
  toolbar: {
    container: [
      [{ header: '1' }, { header: '2' }, { font: [] }],
      [{ size: [] }],
      ['bold', 'italic', 'underline', 'strike', 'blockquote'],
      [{ list: 'ordered' }, { list: 'bullet' }],
      ['link', 'image', 'video'],
    ],
    handlers: {
      image: imageHandler,
    },
  },
};

smujaddid · 2022-04-29T06:30:33Z

var toolbarOptions = [
            ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
            ['blockquote', 'code-block'],

            [{ 'header': 1 }, { 'header': 2 }],               // custom button values
            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
            [{ 'script': 'sub' }, { 'script': 'super' }],      // superscript/subscript
            [{ 'indent': '-1' }, { 'indent': '+1' }],          // outdent/indent
            [{ 'direction': 'rtl' }],                         // text direction

            [{ 'size': ['small', false, 'large', 'huge'] }],  // custom dropdown
            [{ 'header': [1, 2, 3, 4, 5, 6, false] }],

            [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
            [{ 'font': [] }],
            [{ 'align': [] }],

            ['clean'],                                         // remove formatting button
            ['image']
        ];

        var quill = new Quill('#editor', {
            theme: 'snow',
            modules: {
                toolbar: {
                    container: toolbarOptions,
                    handlers: {
                        image: imageHandler
                    }
                }
            },
        });

        function imageHandler() {
            var range = this.quill.getSelection();
            var value = prompt('What is the image URL');
            if(value){
                this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER);
            }
        }

Inserting images with insertEmbed for images with URL does work, but quill doesn't allow it to be deleted, like when I press backspace or delete key, the inserted image won't disappear. Any way to solve this?

jaymathew · 2023-03-16T01:25:14Z

Thanks @Milutin-P, your code helped in 1.3.5, unfortunately something changed on 1.3.7 and now your code snippet doesn't work. I think the issue lies with trying to get the tooltip. const { tooltip } = this.quill.theme I'm not sure if something changed but was wondering if you could shed some light on this issue.

thanks,

jhchen mentioned this issue Aug 29, 2016

Image button need support insert third party image url link #892

Closed

jhchen added the feature label Aug 29, 2016

KillerCodeMonkey mentioned this issue Jul 20, 2017

upload image from url KillerCodeMonkey/ngx-quill#51

Closed

cramy25 mentioned this issue May 6, 2021

url image chenjuneking/quill-image-drop-and-paste#17

Closed

Option to insert an image from a URL #893

Option to insert an image from a URL #893

Comments

jasongisstl commented Aug 26, 2016

laosb commented Jan 23, 2017

CoenWarmer commented Jan 24, 2017

dennisdebel commented Feb 22, 2017 • edited Loading

tannerjt commented Apr 23, 2017

masza commented May 11, 2017

cuduy197 commented May 17, 2017

McSneaky commented May 24, 2017 • edited Loading

Matoo125 commented Jul 3, 2017

vhq2016 commented Nov 24, 2017

oliveratgithub commented Feb 12, 2018

tedtoy commented Feb 13, 2018

rodolfosaraiva commented Apr 19, 2018

Vice93 commented Jul 18, 2018

davek1979 commented Sep 5, 2018

owensco commented Sep 28, 2018

alexjustesen commented Nov 2, 2018

alexandercsmith commented Feb 16, 2019

oliveratgithub commented Feb 17, 2019

repat commented Feb 27, 2019

Gib-git commented Apr 15, 2019

jiangqiming commented Apr 19, 2019

siberiadev commented Apr 23, 2019

repat commented Apr 23, 2019

siberiadev commented Apr 23, 2019 • edited Loading

repat commented Apr 23, 2019

Gib-git commented Apr 23, 2019

jtlimson commented Jul 5, 2019

chrisbmoore commented Mar 25, 2020 • edited Loading

pburrows commented Mar 28, 2020

chrisbmoore commented Mar 29, 2020

digilist commented Aug 5, 2020 • edited Loading

chrisbmoore commented Aug 5, 2020

joeabn commented Nov 21, 2020

connor4312 commented Mar 18, 2021 • edited Loading

tranduclinh2067 commented Feb 17, 2022

Milutin-P commented Mar 3, 2022

smujaddid commented Apr 29, 2022

jaymathew commented Mar 16, 2023

dennisdebel commented Feb 22, 2017 •

edited

Loading

McSneaky commented May 24, 2017 •

edited

Loading

siberiadev commented Apr 23, 2019 •

edited

Loading

chrisbmoore commented Mar 25, 2020 •

edited

Loading

digilist commented Aug 5, 2020 •

edited

Loading

connor4312 commented Mar 18, 2021 •

edited

Loading