§ Simple Example
Configure the drag-and-drop functionality with the dragAndDrop module option
draggables:
The types of files that can be dragged
var basic_editor = new Quill('#basic-editor', {
modules: {
dragAndDrop: {
draggables: [
{
content_type_pattern: '^image/', // Any file with matching type will result in ...
tag: 'img', // ... an 'img' tag ...
attr: 'src' // ... with 'src' equal to the file's base64 (or the result of `onDrop` [see below]).
}
]
}
}
});
Define your editor conainer like normal
<div id="basic-editor"></div>Result: (drag an image onto it)
§ A Somewhat More Advanced Example
You can specify a container to enable dragging and dropping
function doSomethingWithBase64Image(base64_content) {
return "http://quilljs.com/images/quill-photo.jpg";
}
var basic_editor = new Quill('#basic-editor-2', {
modules: {
dragAndDrop: {
draggables: [
{
content_type_pattern: '^image/',
tag: 'img',
attr: 'src'
}
],
onDrop: function(file) {
return DragAndDropModule.utils.getFileDataUrl(file).then(function(base64_content) {
return doSomethingWithBase64Image(base64_content);
})
.then(function(response_from_do_something) {
return response_from_do_something;
})
.catch(function(err) {return false;});
},
container: document.getElementById('#drag-and-drop-container')
}
}
});
Define a container for dragging and dropping.
<div id="basic-editor-2">
<div id="drag-and-drop-container"></div>
</div>
Style the drag-and-drop container
#drag-and-drop-container {
width: 50%;
border: 1px solid red;
}