Quill - Add Image URL instead of uploading it

Question

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:

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

Answer 1

The latest way to add an image in quill in your react/next js application through URL is you have to create a separate image handler function like this:

Step 1: Import useCallback hook from react

  // typescript  
import React, { useCallback,useRef } from "react";
  
 Step 2: use the following image handler function in your React  component

    const quillRef = useRef<ReactQuill>(null);      
    const imageHandler = useCallback(() => {
            const url = prompt("Enter the image URL");
            if (url && quillRef.current) {
              const quill = quillRef.current.getEditor();
              const range = quill.getSelection(true);
              quill.insertEmbed(range.index, "image", url, "user");
            }
          }, [])

Step 3: Add formats

 const formats = [
    "header",
    "bold",
    "italic",
    "underline",
    "strike",
    "blockquote",
    "list",
    "bullet",
    "indent",
    "link",
    "image",
    "color",
    "code-block",
  ];

step 4: Add Toolbar in you react-quill

  const toolbar = [
    [{ header: [1, 2, 3, 4, 5, 6, false] }],
    ["bold", "italic", "underline", "code-block"],
    ["link", "image"],
    [{ list: "ordered" }, { list: "bullet" }],
    [{ indent: "-1" }, { indent: "+1" }],
    [{ direction: "rtl" }],
    [{ color: [] }, { background: [] }],
    [{ font: [] }],
    [{ align: [] }],
    ["clean"],
  ];

step 5: create a module object and add toolbar and image handler function

  const modules = {
      toolbar: {
       container: toolbarOptions,
         handlers: {
          image: imageHandler,
      },
   },
}

step 5: import react quill from React quill with css like this

import ReactQuill from "react-quill";
import "react-quill/dist/quill.snow.css";

step 6: Now you can add the stuff on this component you have created above

        <ReactQuill
          theme="snow"
          value={desc} //assuming you have created state in order to extract the value 
          ref={quillRef}
          onChange={setDesc}// assuming you have created onChange handler
          modules={modules} // add the modules you have created above
          formats={formats}// add the format you have created above 
          />

Answer 2

For Anyone looking to take the url from the quill tooltip not from the prompt.

Custom URL Image Handler for React based on this comment for biz-quill

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

  tooltip.save = function () {
    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 () {
    tooltip.save = originalSave;
    tooltip.hide = originalHide;
    tooltip.hide();
  };
  tooltip.edit('image');
  tooltip.textbox.placeholder = 'Embed URL';
}

And In your Quill Modules add this like:

export const modules = {
  toolbar: {
    container: '#toolbar',
    handlers: {
      undo: undoChange,
      redo: redoChange,
      imageHandler: imageHandler, //Add it here
    },
  },
  history: {
    delay: 500,
    maxStack: 100,
    userOnly: true,
  },
};

You can create a custom button icon from svg like this:

const CustomImageFromLink = () => (
  <svg class="svg-icon" viewBox="0 0 20 20">
    <path d="M18.555,15.354V4.592c0-0.248-0.202-0.451-0.45-0.451H1.888c-0.248,0-0.451,0.203-0.451,0.451v10.808c0,0.559,0.751,0.451,0.451,0.451h16.217h0.005C18.793,15.851,18.478,14.814,18.555,15.354 M2.8,14.949l4.944-6.464l4.144,5.419c0.003,0.003,0.003,0.003,0.003,0.005l0.797,1.04H2.8z M13.822,14.949l-1.006-1.317l1.689-2.218l2.688,3.535H13.822z M17.654,14.064l-2.791-3.666c-0.181-0.237-0.535-0.237-0.716,0l-1.899,2.493l-4.146-5.42c-0.18-0.237-0.536-0.237-0.716,0l-5.047,6.598V5.042h15.316V14.064z M12.474,6.393c-0.869,0-1.577,0.707-1.577,1.576s0.708,1.576,1.577,1.576s1.577-0.707,1.577-1.576S13.343,6.393,12.474,6.393 M12.474,8.645c-0.371,0-0.676-0.304-0.676-0.676s0.305-0.676,0.676-0.676c0.372,0,0.676,0.304,0.676,0.676S12.846,8.645,12.474,8.645"></path>
  </svg>
);

And then just add it to your toolbar like:

  <button className="ql-imageHandler"> //class is ql-yourHandlerName
    <CustomImageFromLink /> //Your Icon Component
  </button>

Answer 3

Even though I am late here I post the answer as it might help someone visiting here.

You can define a custom handler for the image option. Something like this would do.

//add the toolbar options
var myToolbar= [
    ['bold', 'italic', 'underline', 'strike'],       
    ['blockquote', 'code-block'],

    [{ 'color': [] }, { 'background': [] }],         
    [{ 'font': [] }],
    [{ 'align': [] }],

    ['clean'],                                        
    ['image'] //add image here
];


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


function imageHandler() {
    var range = this.quill.getSelection();
    var value = prompt('please copy paste the image url here.');
    if(value){
        this.quill.insertEmbed(range.index, 'image', value, Quill.sources.USER);
    }
}

Answer 4

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.