How to Use Quill Rich Text Editor Laravel 10: A Comprehensive Guide

Quill is a modern, open-source rich text editor that enables you to create visually appealing content for your Laravel 10 applications. By integrating Quill, you can improve the user experience by providing intuitive text formatting options and increasing engagement and content quality.
In this tutorial, we will show you how to set up the Quill text editor with Laravel 10, allowing you to easily create text editors that allow users to format their content. We will walk you through the process of integrating Quill with Laravel 10, including code snippets to make it simple to follow along.

Prerequisites:

• Basic knowledge of Laravel and Blade templating.

• A running Laravel 10 project

• Include the Quill Editor using CDN links.

Step1: Integrating Quill Editor into Laravel

1. Instead of installing the Quill package through Composer, you can use CDN links to include the Quill Editor. Open the desired Laravel Blade file and enter the following code:.

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script> 

   2. Create a container element for the editor in the Blade view.

<div id="quill-editor" class="mb-3" style="height: 300px;"></div> <textarea rows="3" class="mb-3 d-none" name="job_description" id="quill-editor-area"></textarea> 

Step 2: JavaScript Initialization

1. Add the following JavaScript code to your view or a shared JavaScript file:

document.addEventListener('DOMContentLoaded', function() { if (document.getElementById('quill-editor-area')) { var editor = new Quill('#quill-editor', { theme: 'snow' }); var quillEditor = document.getElementById('quill-editor-area'); editor.on('text-change', function() { quillEditor.value = editor.root.innerHTML; }); quillEditor.addEventListener('input', function() { editor.root.innerHTML = quillEditor.value; }); } });

Step 3: Add hidden textarea field

• Create a hidden text area field in your form to store editor content. 

<textarea rows="3" class="mb-3 d-none" name="job_description" id="quill-editor-area"></textarea>

• In your JavaScript code, get the content using editor.root.innerHTML:

 var quillEditor = document.getElementById('quill-editor-area'); editor.on('text-change', function() { quillEditor.value = editor.root.innerHTML; }); quillEditor.addEventListener('input', function() { editor.root.innerHTML = quillEditor.value; });

• Submit the form, and then extract the content from the request object in your controller.

To add more modules to the Quill Editor toolbar, you can do the following:

 modules: { toolbar: [ [{ 'header': [1, 2, false] }], ['bold', 'italic', 'underline', 'strike'], ['blockquote', 'code-block'], [{ 'list': 'ordered' }, { 'list': 'bullet' }], ['link', 'image', 'video'], ['clean'] ] }

Consider the following example for a complete Quill text editor that uses Laravel Blade View.

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet"> <script src="https://cdn.quilljs.com/1.3.6/quill.js"></script> <label class="form-label font-weight-bold">Job Description</label> <div id="quill-editor" class="mb-3" style="height: 300px;"> </div> <textarea rows="3" class="mb-3 d-none" name="description" id="quill-editor-area"></textarea> <script> document.addEventListener('DOMContentLoaded', function() { if (document.getElementById('quill-editor-area')) { var editor = new Quill('#quill-editor', { theme: 'snow' }); var quillEditor = document.getElementById('quill-editor-area'); editor.on('text-change', function() { quillEditor.value = editor.root.innerHTML; }); quillEditor.addEventListener('input', function() { editor.root.innerHTML = quillEditor.value; }); } }); </script>

 

Step 4: Editor Preview 

Editor's preview: