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

showkat ali
28th Feb, 2024
1220
0

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.

Integrating Quill Editor into Laravel

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>

JavaScript Initialization

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;
            });
        }
    });

    This script sets up the Quill editor within the specified container, utilizing CDN links for the Quill library.

How to get value from the Quill Editor : click here

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>

Editor's preview:

To learn how to install and use CKEditor in Laravel 10, click here.

Conclusion:

By following these steps and exploring the resources provided, you can successfully integrate Quill into your Laravel 10 applications, allowing your users to create rich and engaging content that improves your project's user experience.

We are Recommending you

*Hire Me

showkat ali

Greetings, I'm a passionate full-stack developer and entrepreneur based in Pakistan. I specialize in PHP, Laravel, React.js, Node.js, JavaScript, and Python. I own interviewsolutionshub.com, where I share tech tutorials, tips, and interview questions. I'm a firm believer in hard work and consistency. Welcome to interviewsolutionshub.com, your source for tech insights and career guidance