I'm trying to extend the image function in Quill.
I get an error
Uncaught ReferenceError: Emitter is not defined at FileReader.reader.onload
So I try to import Emitter like this:
var Emitter = Quill.import('core/emitter');
But then I get another error:
quill Cannot import emitter. Are you sure it was registered?
Reading the docs I can't work out how to fix this.
Here is the code I'm using:
function imageHandler() {
var Delta = Quill.import('delta');
var Emitter = Quill.import('core/emitter');
let fileInput = this.container.querySelector('input.ql-image[type=file]');
if (fileInput == null) {
fileInput = document.createElement('input');
fileInput.setAttribute('type', 'file');
fileInput.setAttribute('accept', 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon');
fileInput.classList.add('ql-image');
fileInput.addEventListener('change', () => {
if (fileInput.files != null && fileInput.files[0] != null) {
var file_size = fileInput.files[0].size;
console.log('Image size: '+file_size);
let reader = new FileReader();
reader.onload = (e) => {
let range = this.quill.getSelection(true);
this.quill.updateContents(new Delta()
.retain(range.index)
.delete(range.length)
.insert({ image: e.target.result })
, Emitter.sources.USER);
this.quill.setSelection(range.index + 1, Emitter.sources.SILENT);
fileInput.value = "";
}
reader.readAsDataURL(fileInput.files[0]);
}
});
this.container.appendChild(fileInput);
}
fileInput.click();
}