How to add image from computer in quill js?

@lew 

To add an image from your computer in Quill JS, you can use the following steps:

1. First, make sure you have the Quill editor initialized in your HTML file. You can do so by including the Quill library and creating a Quill instance in your HTML file.
2. Once you have the Quill editor set up, you can add a custom button to the toolbar for adding images. You can add a button with an image icon or text like "Insert Image".
3. Next, you need to create a file input element in your HTML file to allow users to upload images from their computer. You can hide this file input element using CSS so that it is not visible on the page.
4. You need to add an event listener to the button that you created in step 2 so that when the button is clicked, it will trigger a click event on the file input element.
5. When the file input element is clicked, the user can select an image from their computer. You can use JavaScript to handle the file selection event and insert the image into the Quill editor.

Here is an example code snippet showing how you can achieve this:

HTML:

1
2
3
4
5
6
7
8
9

<div id="toolbar">
  <button id="insertImage">Insert Image</button>
</div>

<div id="editor">
  <p>Start typing here...</p>
</div>

<input type="file" id="imageInput" style="display: none">

JavaScript:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

var toolbar = document.getElementById('toolbar');
var editor = document.getElementById('editor');
var imageInput = document.getElementById('imageInput');

var quill = new Quill('#editor', {
  theme: 'snow'
});

var insertImageButton = document.getElementById('insertImage');
insertImageButton.addEventListener('click', function() {
  imageInput.click();
});

imageInput.addEventListener('change', function() {
  var file = imageInput.files[0];
  if (file) {
    var reader = new FileReader();
    reader.onload = function(e) {
      var range = quill.getSelection();
      quill.insertEmbed(range.index, 'image', e.target.result);
    }
    reader.readAsDataURL(file);
  }
});

In this example, when the "Insert Image" button is clicked, it will trigger a click event on the hidden file input element. The user can then select an image from their computer, which will be inserted into the Quill editor at the current cursor position.