How to add image in quill.js?
1 answer
by
hal.littel ,
6 months ago
@samara
To add an image in Quill.js, you can use the following code:
- 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>
|
- 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>
|
- 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.
Related Threads:
How to add css class to image tag in quill.js editor?
How to add custom fonts to the quill.js editor?
How to add custom icon in quill.js toolbar?
How to add inline comment in quill.js editor?
How to add a align buttons to the toolbar in quill.js?
How to add product image as a background image in woocommerce?