Adding Quill Editor in Laravel using Vite
In this tutorial, we will show you how to add Quill editor in a Laravel project using Vite.
A Vite is a modern build tool for frontend applications that offers a very fast development environment by combining the CSS and JavaScript files into assets to make them ready for production use.
Quill is a free, open-source WYSIWYG editor designed for the modern web. Its modular architecture and versatile API make it entirely customizable to suit various requirements.
We assume that you already have a Laravel project with the Vite build tool:
- Install Quill editor using the following command on your terminal:
- Import quill.snow.css theme to /resources/sass/app.scss:
- Import quill.js to /resources/js/app.js:
- Add editor to your blade file where you want it to appear:
- Add the following script to to the body of the blade file:
- Next, run your application to see the Quill editor on your page.
npm install quill@1.3.6
@import '../../node_modules/quill/dist/quill.snow.css';
import '../../node_modules/quill/dist/quill';
<div id="editor">
</div>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
var toolbarOptions = [
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'header': 1 }, { 'header': 2 }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'indent': '-1'}, { 'indent': '+1' }],
[{ 'direction': 'rtl' }],
[{ 'size': ['small', false, 'large', 'huge'] }],
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
[{ 'align': [] }],
['clean']
];
var quill = new Quill('#editor', {
modules: {
syntax: false,
toolbar: toolbarOptions
},
theme: 'snow'
});
window.quill = quill
});
</script>