Quill Rich Text Editor in Laravel 11

How to Use Quill Rich Text Editor in Laravel 11

In this post, we will learn about how to install and use quill rich text editor in laravel 11 application.

Quill is a free, open-source rich text editor. It lets users write and format text easily, similar to a word processor. You can change text styles, add lists, insert images, and even include links. It’s simple to use and works well in web applications. Quill is customizable, so developers can adapt it to their needs. It’s a popular choice for creating blogs, comments, and other online text content. You Can Learn Laravel 11 Pagination Add Query String Example

Quill Rich Text Editor in Laravel 11

In this example, we will make a form in a Blade file. Inside the Blade file, we will use Quill rich text editor to write the body content. Then, the user can submit the form, and we will get the content in the controller method. You Can Learn How to Compress Image Size in Laravel 11?

Table of Contents HIDE
1 Step for install and Use Quill Rich Text Editor in Laravel 11
2 Step 1: Install Laravel 11
3 Step 2: Create Route
4 Step 3: Create Controller
5 Step 4: Create View File
6 Run Laravel App:
6.1 Like this:

So, let’s see below the steps to getting done with quill editor Laravel.

Step for install and Use Quill Rich Text Editor in Laravel 11

  • Step 1: Install Laravel 11
  • Step 2: Create Route
  • Step 3: Create Controller
  • Step 4: Create View File
  • Run Laravel App:

Step 1: Install Laravel 11

First of all, we need to get a fresh Laravel 11 version application using the command below because we are starting from scratch. So, open your terminal or command prompt and run the command below:

composer create-project laravel/laravel example-app

Step 2: Create Route

In this step, we will add three routes with GET and POST method in routes/web.php file. so let’s add it.

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\QuillController;
  
Route::get('quill-editor', [QuillController::class, 'index']);
Route::post('quill-editor', [QuillController::class, 'store'])->name('quill.store');

Step 3: Create Controller

In this step, we have to create new controller as QuillController with index() and store() methods.

so let’s update follow code:

app/Http/Controllers/QuillController.php

<?php
    
namespace App\Http\Controllers;
    
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
    
class QuillController extends Controller
{
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function index(): View
    {
        return view('quill');
    }
    
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function store(Request $request): JsonResponse
    {
        dd($request->all());
    }
}

Step 4: Create View File

In Last step, let’s create quill.blade.php for display form with quill and put following code, put code on it.

resources/views/quill.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How to Use Quill Rich Text Editor in Laravel 11? - ItSolutionStuff.com</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <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" />
</head>
<body>
<div class="container">
    <div class="card mt-5">
        <h3 class="card-header p-3">How to Use Quill Rich Text Editor in Laravel 11? - ItSolutionStuff.com</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="Name">

                    @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>
                    @endif
                </div>
           
                <div class="mb-3">
                    <button class="btn btn-success btn-submit">Submit</button>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

<script src="https://cdn.jsdelivr.net/npm/quill@2.0.2/dist/quill.js"></script>

<!-- Initialize Quill editor -->
<script type="text/javascript">
    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>
</html>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/quill-editor

Output:

laravel 11 quill editor preview e1727535259198 How to Use Quill Rich Text Editor in Laravel 11

I hope it can help you…

You Can Learn Let’s Learn Laravel A Guided Path For Beginners

This Post Has One Comment

Leave a Reply