javascripthtmlrich-text-editorquilldelta

Quill - Add Image URL instead of uploading it

I'm not a pro in JS and I'm using Quill Rich Text Editor for one of our projects. It's working well, but when I use getContents() method to get its contents (with Delta format), it shows the images, like the following:

{
  "insert": {
    "image": "data:image/png;base64,iVBORw0KGgoAA...=="
  }
}, ...

I want to give the editor a URL for the images when I add them, instead of uploading one. I mean, I want it to show the URL input box when I add images, instead of opening a file dialog for selecting an image. Like what I do when I add videos:

enter image description here

How can I achieve this? Should I edit quill.js codes?

Solution

  • Yeah. I also do not understand how this could not be easier. Unfortunately Quill is still in version 1.x. It can be normal to encounter situations like this. But do not worry. Regarding your question, I think this can help you:

    https://github.com/loagit/Quill-Examples-and-FAQ#quill-project-004---customizable-tooltip

    To get more into the subject, I suggest you see this whole repository. I hope it helps you. There is a lot of information there.