How to Use Quill Rich Text Editor in Laravel 11?

By Hardik Savani September 4, 2024 Category : Laravel

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.

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.

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

laravel 11 quill image upload

Step for Laravel 11 Quill Rich Text Editor Example

  • 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');

Read Also: Laravel 11 Many to Many Eloquent Relationship Tutorial

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:

Read Also: Laravel 11 Breeze Multi Auth Tutorial
http://localhost:8000/quill-editor

Output:

I hope it can help you...

Tags :
Previous

Laravel 11 Breeze Multi Auth Tutorial
Next

Laravel 11 Inertia Vue JS CRUD Example Tutorial

We are Recommending you

Popular Posts

Categories

Latest Posts

Shares