How to add image in quill.js?

Member

by samara , in category: Javascript , 4 months ago

How to add image in quill.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

by hal.littel , 4 months ago

@samara 

To add an image in Quill.js, you can use the following code:

  1. First, initialize Quill editor in your HTML file:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
    <link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
</head>
<body>
    <div id="editor"></div>
    <script>
        var quill = new Quill('#editor', {
            theme: 'snow'
        });
    </script>
</body>
</html>


  1. Add a button or a toolbar to trigger the image upload:
1
2
3
<div id="toolbar">
    <button id="image-upload">Insert Image</button>
</div>


  1. Add a function to handle the image upload:
1
2
3
4
5
6
7
8
document.getElementById('image-upload').onclick = function() {
    var url = prompt('Enter the URL of the image');
    if (url) {
        quill.focus();
        var range = quill.getSelection();
        quill.insertEmbed(range.index, 'image', url);
    }
}


Now, when you click on the "Insert Image" button, a prompt will appear asking for the URL of the image. Once you enter the URL, the image will be inserted at the current cursor position in the Quill editor.