This is what I used on a form with an ID of news. On submit it plucks the innerhtml from the editor and copies it to a hidden input field.
<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="/js/quill-blot-formatter.min.js"></script>
<!-- Initialize Quill editor -->
<script>
Quill.register('modules/blotFormatter', QuillBlotFormatter.default);
var toolbarOptions = [
['bold', 'italic', 'underline','image','link'], // toggled buttons
[{ 'header': 1 }, { 'header': 2 },{ 'color': [] }, { 'background': [] }],
[{ 'align': [] },{ 'list': 'ordered' }, { 'list': 'bullet' }, { 'indent': '-1' }, { 'indent': '+1' }], // outdent/indent
[{ 'size': ['small', false, 'large', 'huge'] }], // custom dropdown
['clean'] // remove formatting button
];
var quill = new Quill('#editor', {
modules: {
blotFormatter: {
// options
},
toolbar: toolbarOptions
},
placeholder: 'Write something newsworthy',
theme: 'snow'
});
var form = document.getElementById('news');
form.onsubmit = function () {
// Populate hidden form on submit
var content = document.querySelector('input[name=content]');
content.value = quill.root.innerHTML;
}
</script>