Laravel 11 Use Quill Rich Text Editor Example

Websolutionstuff | Sep-04-2024 | Categories : Laravel

Hello, laravel web developers! In this article, we'll see how to use Quill rich text editor in laravel 11. Here, we'll use Quill rich text editor in laravel 11. Quill is a free, open-source WYSIWYG editor built for the modern web. Completely customize it for any need with its modular architecture and expressive API.

Quill is a modern rich text editor built for compatibility and extensibility. It was created by Jason Chen and Byron Milligan and actively maintained by Slab.

You can change text styles, add lists, insert images, and even include links.

Laravel 11 Use Quill Rich Text Editor Example

Laravel 11 Use Quill Rich Text Editor Example

Step 1: Install Laravel 11 Application

In this step, we'll install the laravel 11 application using the following command.

composer create-project laravel/laravel laravel-11-example

Step 2: Define Route

Then, we'll define the routes into the web.php file

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

Next, we'll create a controller and add the following code to that file.

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
    {
        info($request->all());
    }
}

Step 4: Create View File

Then, we'll create a blade file and add the following HTML code to that file.

resources/views/quill.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 11 Use Quill Rich Text Editor Example - Techsolutionstuff</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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quill.snow.css" rel="stylesheet" />
</head>
<body>
<div class="container">
    <div class="card mt-5">
        <h3 class="card-header p-3">Laravel 11 Use Quill Rich Text Editor Example - Techsolutionstuff</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/[email protected]/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>

Step 5: Run the Laravel 11 Application

Now, run the laravel 11 application using the following command.