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

Answer 1

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

Answer 2

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>

Answer 3

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

Answer 4

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.