How to Use Quill Rich Text Editor in Laravel 11

 

Introduction

In the world of web development, rich text editors have become essential tools for enhancing user experience. Quill is a powerful, open-source rich text editor that allows developers to create beautiful and dynamic content editing experiences. In this tutorial, we'll guide you through integrating Quill Rich Text Editor into your Laravel 11 application.

Table of Contents

• What is Quill?
• Setting Up Laravel 11
• Installing Quill
• Creating a Basic Form with Quill
• Handling Form Submission
• Conclusion

What is Quill?

Quill is a free, open-source WYSIWYG editor built for the modern web. It offers rich formatting options and is highly customizable, making it an excellent choice for any web application needing a text editor.

Setting Up Laravel 11

Before we begin, make sure you have Laravel 11 installed on your system. If you haven't done so, you can set up a new Laravel project by running:

composer create-project --prefer-dist laravel/laravel your-project-name

Navigate to your project directory:

cd your-project-name

Installing Quill

To integrate Quill into your Laravel project, include the necessary CSS and JavaScript files. You can do this via CDN. Add the following links in your HTML file (or Blade template):

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.snow.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>

Creating a Basic Form with Quill

Create a form in your Blade template to collect user input. Here’s an example of how you can set up the form using Bootstrap for styling and Quill for the text editor:

<div class="container">
    <div class="card mt-5">
        <h3 class="card-header p-3">Create a New Post</h3>
        <div class="card-body">
            <form method="POST" action="{{ route('quill.store') }}">
                @csrf
            
                <div class="mb-3">
                    <label class="form-label" for="inputName">Title:</label>
                    <input 
                        type="text" 
                        name="title" 
                        id="inputName"
                        class="form-control @error('title') is-invalid @enderror" 
                        placeholder="Enter title">

                    @error('title')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
             
                <div class="mb-3">
                    <label class="form-label" for="inputEmail">Body:</label>
                    <div id="quill-editor" class="mb-3" style="height: 300px;"></div>
                    <textarea 
                        rows="3" 
                        class="mb-3 d-none" 
                        name="body" 
                        id="quill-editor-area"></textarea>

                    @error('body')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>
           
                <div class="mb-3">
                    <button class="btn btn-success btn-submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function() {
        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>

Key Components:

• Title Input: A standard text input for the post title.
• Quill Editor: A dynamic editor where users can format their content.
• Hidden Textarea: Used to store the HTML output of the Quill editor for form submission.

Handling Form Submission

To handle the form submission, you need to create a route and a controller method to save the input. Here’s a quick overview:

1. Define the route in routes/web.php:

use App\Http\Controllers\QuillController;

Route::post('/quill/store', [QuillController::class, 'store'])->name('quill.store');

2. Create a controller using Artisan:

php artisan make:controller QuillController

3. In the QuillController.php, add the store method:

public function store(Request $request)
{
    $request->validate([
        'title' => 'required|string|max:255',
        'body' => 'required|string',
    ]);

    // Save the data to the database
    Post::create([
        'title' => $request->title,
        'body' => $request->body,
    ]);

    return redirect()->back()->with('success', 'Post created successfully!');
}

Conclusion

Integrating the Quill Rich Text Editor into your Laravel 11 application is a straightforward process that enhances the user experience by allowing rich content creation. With this tutorial, you should now have a functional editor integrated into your forms, ready to handle user input dynamically.