A CKEditor instructional example using Laravel 9. You will discover how to set up and use CKEditor in Laravel 9 in this tutorial.

There are essentially two ways to install and use CKEditor in a Laravel 9 application. However, this guide will demonstrate an easy method for installing CKEditor in a Laravel 9 application.

Table of Contents

  1. Install Laravel 9 App
  2. Connecting App to Database
  3. Create Post Model & Migration
  4. Add Fillable Property in Model
  5. Make Route
  6. Create Controller
  7. Create Blade Views File
  8. Start Development Server

Install Laravel 9 App

Install the most recent Laravel 9 app first. So, open a terminal and run the command listed below to install the most recent Laravel step.

 composer create-project --prefer-dist laravel/laravel Blog

Connecting App to Database

Create a database using the Laravel 9 software you downloaded and installed. The.env file must be located, and the database setup information is as follows:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password

Create Post Model & Migration

Reopen the cmd prompt. then execute the next command on it. To generate the form's model and migration file:

php artisan make:model Post -m

Next, access the create posts table.php file located in the migrations directory of the database. And then add the following code to the up() function:

public function up()
{
    Schema::create('posts', function (Blueprint $table) {
        $table->id();
        $table->string('title');
        $table->text('body');
        $table->timestamps();
    });
}

Open the command prompt once more, and then enter the following command to add tables to the database:

php artisan migrate

Add Fillable Property in Model

Add the fillable property to the Post model in the app/models directory in this step:

<?php
 
namespace App\Models;
 
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
 
class Post extends Model
{
    use HasFactory;
     
    protected $fillable = [
        "title",
        "body"
    ];
}

Make Route

Create routes in this step, then add them to the web.php file, which is found inside the routes directory:

<?php
use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;

Route::get('posts', [PostController::class, "index"]);
Route::get("create", [PostController::class, "create"]);
Route::post('store', [PostController::class, "store"]);

Create Controller

Create the controller using commands in this phase. Open the command prompt and type the command listed below to generate the controller file.

cd your project root directory
//run the command

php artisan make:controller PostController

following the creation of the controller file. Open this controller file, then change the following code into it:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Post;
 
class PostController extends Controller
{
     
    public function index() {
 
        $posts =  Post::orderBy("id", "desc")->paginate(5);
 
        return view("posts", compact("posts"));
    }
 
 
    // Create Post 
    public function create() {
 
        return view("create");
    }
 
 
    public function store(Request $request) {
 
        $post = [  "title"  =>  $request->title,
                    "body" => $request->body
                ];
       
        $post  =  Post::create($post);
 
        return back()->with("success", "Post has been created");
     
    }
}

Create Blade Views File

This step entails making two files with the names posts.blade.php and create.blade.php in the resource/views directory.

Create the following blade view file with the name posts.blade.php and edit the code in it first:

<!doctype html>
<html lang="en">

<head>
    <title> Laravel 9 Posts List For CKEditor Example </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <style>
        table td p {
            word-break: break-all;
        }
    </style>
</head>

<body>
    <div class="container mt-4">
        <div class="row">
            <div class="col-xl-8">
                <h3 class="text-right"> Laravel 9 CKEditor Integration Example</h3>
            </div>
            <div class="col-xl-4 text-right">
                <a href="{{url('create')}}" class="btn btn-primary"> Add Post </a>
            </div>
        </div>
        @if(count($posts) > 0)
        <div class="table-responsive mt-4">
            <table class="table table-striped">
                <thead>
                    <tr>
                        <th> Id </th>
                        <th style="width:30%;"> Title </th>
                        <th> Decription </th>
                    </tr>
                </thead>
                <tbody>
                    @foreach($posts as $post)
                    <tr>
                        <td> {{ $post->id }} </td>
                        <td> {{ $post->title }} </td>
                        <td> {!! html_entity_decode($post->body) !!} </td>
                    </tr>
                    @endforeach
                </tbody>
            </table>
        </div>
        {{ $posts->links() }}
        @endif
    </div>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>

Create a file called create.blade.php and update it with the following code:

<!doctype html>
<html lang="en">

<head>
    <title> Laravel 9 Install CKEditor Example </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    {{-- CKEditor CDN --}}
    <script src="https://cdn.ckeditor.com/ckeditor5/23.0.0/classic/ckeditor.js"></script>
</head>

<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-xl-12 text-right">
                <a href="{{ url('posts') }}" class="btn btn-danger"> Back </a>
            </div>
        </div>
        <form action="{{url('store')}}" method="POST">
            @csrf
            <div class="row">
                <div class="col-xl-8 col-lg-8 col-sm-12 col-12 m-auto">
                    @if(Session::has('success'))
                    <div class="alert alert-success alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert">?</button>
                        {{ Session::get('success') }}
                    </div>
                    @elseif(Session::has('failed'))
                    <div class="alert alert-danger alert-dismissible">
                        <button type="button" class="close" data-dismiss="alert">?</button>
                        {{ Session::get('failed') }}
                    </div>
                    @endif
                    <div class="card shadow">
                        <div class="card-header">
                            <h4 class="card-title"> Laravel 9 Install CKEditor Example Tutorial </h4>
                        </div>
                        <div class="card-body">
                            <div class="form-group">
                                <label> Title </label>
                                <input type="text" class="form-control" name="title" placeholder="Enter the Title">
                            </div>
                            <div class="form-group">
                                <label> Body </label>
                                <textarea class="form-control" id="body" placeholder="Enter the Description"
                                    name="body"></textarea>
                            </div>
                        </div>
                        <div class="card-footer">
                            <button type="submit" class="btn btn-success"> Save </button>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script>
        ClassicEditor
            .create(document.querySelector('#body'))
            .catch(error => {
                console.error(error);
            });
    </script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

</html>

Please take note of the following and remember to include it in your blade view file:

	
<script src="https://cdn.ckeditor.com/ckeditor5/23.0.0/classic/ckeditor.js"></script>

Start Development Server

Open a terminal and type the command below to launch the development server:

php artisan serve

Then launch your browser and enter the following URL:

http://127.0.0.1:8000/create

Recommended Posts

View All

How To Use WYSIHTML5 Editor In Laravel 9?


wysihtml5 editor example, laravel wysihtml5 editor example, wysihtml5 laravel, wysihtml5 editor example in laravel, wysihtml5 with laravel, wysihtml5...

Social Media Share Buttons Integration Tutorial in Laravel 9


This fast guide will demonstrate how to use the laravel-share package to add social media share buttons to each page of Laravel.

Laravel 9 FullCalendar Ajax Tutorial with Example


We&amp;#039;ll show you how to use the Fullcalendar JavaScript event calendar plugin to add FullCalendar to your Laravel app and create and cancel eve...

Laravel Query Builder Where Exists Example


laravel use sql where exists clause,laravel whereExists, laravel whereExists not working,laravel where exists example,laravel exists query

Building Smarter Web Applications with OpenAI for Laravel


In this tutorial, we'll explore how to use OpenAI in Laravel, and how it can help us build smarter, more efficient web applications.