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?

Conics

Answer 1

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.

Anaesthesia

Thanks, but I was searching for a code. But no problem, now I use Shortcodes (like WP) like this: [img src="..."] and I'll change that in my PHP script. If you know any other "FREE" rich text editors for HTML and JS (better than Quill), please share. Thanks – Conics

@H.Farid There are many other good rich text editors out there, but they follow another proposal. Quill follows the idea of using a Delta, a representation of data in a simple and readable JSON format, understandable by any application. Other publishers often only use HTML as "data". Still, some provide translation tools to get it in other formats. I suggest you look for CKEditor and TinyMCE. They are also considered great text editors, with many features and facilities. Ah, I must remember that the link I gave you has code showing how to do what you want. Just open a project to see. – Anaesthesia

Try prose and slate – Steatite

Answer 2

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);
    }
}

Octonary

Answer 3

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>

Whether

Is there a way to change the "Visit URL" text on the left tooltip? – Blockade

There are many options I have seen such as overriding the class of tooltip or changing the hard coded value. Sadly quill does not give you that option but I found a quick way to do it, if you look at it's class you will see (for image): .ql-snow .ql-tooltip::before { content: "Visit URL:"; line-height: 26px; margin-right: 8px; }. So just add .ql-snow .ql-tooltip::before { content: "New Label:" } to a css file that you import in the toolbar – Whether

is there any way to add an alt attribute for each uploaded image ? – Abolition

Answer 4

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 
          />

Serle