How to add image in Quill JS?

Question

I can't figure out how to get images to work like in the example on http://quilljs.com/.

I tried adding <span title="Image" class="ql-format-button ql-image"></span> to the toolbar, which adds the button, but clicking on the button does nothing and I can't find anything in the documentation. Any suggestion?

Spital

Hello. I'm coming here just to add a little more information to anyone who sees this question. I believe the following link can be of great help to anyone using (or starting to use) Quill: github.com/loagit/Quill-Examples-and-FAQ – Garcia

Answer 1

Updated Answer

As of version 1.0 and beyond you no longer need to add the tool-tip module it's included by default. An example of how to enable it would be this.

    <script>
            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] }],
                [ 'link', 'image', 'video', 'formula' ],          // add's image support
                [{ 'color': [] }, { 'background': [] }],          // dropdown with defaults from theme
                [{ 'font': [] }],
                [{ 'align': [] }],

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

        var quill = new Quill('#editor', {
            modules: {
                toolbar: toolbarOptions
            },

            theme: 'snow'
        });
    </script>

Halland

can we upload large image ? and store it on server and save path of image instead of base64 data – Chapen

This post is extremely helpful. I just added that array and set the options as shown and it gave me a fully setup badass editor that makes me now think JIRA/Confluence is using Quill. – Hake

@Chapen This has some solutions for storing the image on the server rather than using base64 data: github.com/quilljs/quill/issues/1089 – Obeisance

Answer 2

Edit: This is no longer accurate as of 1.0. Chris Hawkes's answer is correct.

This unfortunately doesn't seem documented anywhere but you need to include the image-tooltip module. For example, this is what the editor on the quilljs.com homepage uses:

quill = new Quill('#editor', {
  modules: {
    'toolbar': { container: '#toolbar' },
    'image-tooltip': true,
    'link-tooltip': true
  },
  theme: 'snow'
});

Cowen

Answer 3

As of Quill version 1.3, none of the answers above work anymore. Unfortunately, the official documentation hasn't progressed much either.

You have two ways to solve your problem, both work for official themes Snow and Bubble. Either way, you do not have to add the following code:

'image-tooltip': true,
'link-tooltip': true

Way 1: Initialize quill as following:

var editor = new Quill('#editorDiv', 
{
    modules: {
      toolbar: [
            ...
            ['image'],
            ...
        ],
        //not needed anymore: 'image-tooltip': true,
        //not needed anymore: 'link-tooltip': true
        ...
    },
    ...
});

Way 2: Initialize quill as following:

<div id="editorToolbarDiv">
  ...
  <button class="ql-image"></button>
</div>
<div id="editorDiv"></div>

var editor = new Quill('#editorDiv', 
{
    modules: {
        toolbar: '#editorToolbarDiv',
        //not needed anymore: 'image-tooltip': true,
        //not needed anymore: 'link-tooltip': true,
        ...
    },
    ...
});

As of version 1.3, Quill does not support resizing images. One can do it with a custom module, though.

Pash

How is your "Way 1" different from @Chris Hawkes' answer (https://mcmap.net/q/514794/-how-to-add-image-in-quill-js)? It seems it isn't and Chris's answer works with current version 1.3.6 – Cosme

Answer 4

well the above answer is the correct in the js, but you have to add html to the editor, example:

<span class="ql-format-group">
  <span title="Link" class="ql-format-button ql-link"></span>
  <span class="ql-format-separator"></span>
  <span title="Image" class="ql-format-button ql-image"></span>
</span>

so after that put in the js

quill = new Quill('#editor', {
  modules: {
    'toolbar': { container: '#toolbar' },
    'image-tooltip': true,
    'link-tooltip': true
  },
  theme: 'snow'
});

Gaselier

Why do none of the examples on how to create the toolbar actually create the toolbar shown above the examples? Or example what the "title" things is, why the examples don't even contain? – Hessney

I'm getting so frustrated with their awful examples and documentation. It's a shame, this tool is just what I need - but, wow. Really? I mean nobody likes documentation but OH MY this takes the cake – Severson

and what is that, that you can't understand? – Gaselier