import { DirectUpload } from “@rails/activestorage” import ImageResize from “@taoqf/quill-image-resize-module/image-resize.min”; import Quill from 'quill/quill'; export default Quill;
Quill.register('modules/imageResize', ImageResize);
// document.addEventListener(“DOMContentLoaded”, function (event) { // var quill = new Quill('#editor-container', { // modules: { // toolbar: [ // [{ header: [1, 2, false] }], // ['bold', 'italic', 'underline'], // ['image', 'code-block'] // ] // }, // placeholder: 'Compose an epic…', // theme: 'snow' // }); // // document.querySelector('form').onsubmit = function () { // var body = document.querySelector(‘input'); // body.value = quill.root.innerHTML // }; // });
document.addEventListener(“DOMContentLoaded”, function (event) {
var quill = new Quill('#editor-container', { modules: { toolbar: [ [{ header: [1, 2, 3, 4, 5, 6, false] }], [{ color: [] }], [{ size: [] }], [ 'bold', 'italic', 'underline', 'strike', { 'script': 'super'}, { 'script': 'sub' }, 'code', 'link' ], ['blockquote', 'code-block', 'image'], [{ list: 'ordered' }, { list: 'bullet' }], [{ align: ['center', 'right', 'justify', false] }], [{ indent: '-1'}, { indent: '+1' }] ], imageResize: { displaySize: true, displayStyles: { backgroundColor: 'black', border: 'none', color: 'white' }, modules: [ 'Resize', 'DisplaySize', 'Toolbar' ] } }, value: document.querySelector('input[class=article-content]').value, theme: 'snow' }); document.querySelector('form').onsubmit = function () { var body = document.querySelector('input[class=article-content]'); body.value = quill.root.innerHTML }; // More on this in a bit! quill.getModule('toolbar').addHandler('image', () => { importImage(quill); });
});
var importImage = function (textEditor) {
const input = document.createElement('input'); input.setAttribute('type', 'file'); input.click(); input.onchange = () => { const file = input.files[0]; // Ensure only images are uploaded if (/^image\//.test(file.type)) { uploadImage(textEditor, file); } else { alert('Only images allowed'); } };
};
var uploadImage = function (textEditor, file) {
var fd = new FormData(); fd.append('blob', file); var upload = new DirectUpload(file, '/rails/active_storage/direct_uploads') upload.create((error, blob) => { if (error) { console.log(error) } else { insertImage( textEditor, `/rails/active_storage/blobs/${blob.signed_id}/${blob.filename}` ); } });
};
var insertImage = function (textEditor, fileUrl) {
const range = textEditor.getSelection(); textEditor.insertEmbed(range.index, 'image', fileUrl);
};
var icons = Quill.import('ui/icons');
icons = `<svg class=“bi bi-code” width=“1.5em” height=“1.5em” viewBox=“0 0 16 16” fill=“currentColor” xmlns=“www.w3.org/2000/svg”>
<path fill-rule="evenodd" d="M5.854 4.146a.5.5 0 010 .708L2.707 8l3.147 3.146a.5.5 0 01-.708.708l-3.5-3.5a.5.5 0 010-.708l3.5-3.5a.5.5 0 01.708 0zm4.292 0a.5.5 0 000 .708L13.293 8l-3.147 3.146a.5.5 0 00.708.708l3.5-3.5a.5.5 0 000-.708l-3.5-3.5a.5.5 0 00-.708 0z" clip-rule="evenodd"/>
</svg>`;