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?

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: https://github.com/loagit/Quill-Examples-and-FAQ — Loa, Jan 13 '20 at 19:20

score 43 · Accepted Answer · answered Nov 06 '16 at 23:36

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>

can we upload large image ? and store it on server and save path of image instead of base64 data — hardik, Jan 19 '17 at 10:48
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. — agm1984, Sep 06 '17 at 05:43
@hardik This has some solutions for storing the image on the server rather than using base64 data: https://github.com/quilljs/quill/issues/1089 — Adam Taylor, Aug 24 '21 at 22:03

jhchen · Answer 2 · 2017-07-15T18:51:02.070

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

score 4 · Answer 3 · answered Aug 14 '19 at 13:16

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.

How is your "Way 1" different from @Chris Hawkes' answer (https://stackoverflow.com/a/40455795/887930)? It seems it isn't and Chris's answer works with current version 1.3.6 — John Archer, Sep 16 '19 at 07:54

score 2 · Answer 4 · answered Oct 26 '15 at 15:15

2

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

answered Oct 26 '15 at 15:15

Andres Felipe

4,292
1
24
41

3

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? – Michael Jan 12 '16 at 02:30
3

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 – scniro Jul 21 '16 at 19:14
and what is that, that you can't understand? – Andres Felipe Jul 21 '16 at 20:57

How to add image in Quill JS?

4 Answers4

Linked