6

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?

HF_
  • 689
  • 3
  • 9
  • 22

3 Answers3

18

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);
    }
}
aimme
  • 6,385
  • 7
  • 48
  • 65
5

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>
noobmaster69
  • 49
  • 2
  • 3
  • Is there a way to change the "Visit URL" text on the left tooltip? – Picoral Apr 02 '21 at 04:57
  • 1
    There are many [options](https://github.com/quilljs/quill/issues/2485) 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 – noobmaster69 Apr 02 '21 at 12:08
  • is there any way to add an alt attribute for each uploaded image ? – Yassine Soltani Jan 31 '22 at 14:21
3

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.

Loa
  • 2,117
  • 3
  • 21
  • 45
  • 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 – HF_ Jan 12 '20 at 08:23
  • @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. – Loa Jan 12 '20 at 13:57
  • Try prose and slate – Vikram Sharma Oct 15 '20 at 19:05