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

Tags

Recommended Posts

View All

Laravel 9 Socialite Login with Facebook Tutorial

In this tutorial, we'll learn how to use the Socialite package in Laravel to login with a Facebook social networking account.
Read More

Laravel Where Clause with MySQL Function Example

laravel eloquent where year,laravel eloquent mysql functions,laravel eloquent where clause mysql,mysql function mysql laravel
Read More

Laravel 9 File Manager Tutorial Example

Learn how to implement a robust file manager in Laravel 9 with our step-by-step tutorial. This example will help you manage and organize files efficie...
Read More

Laravel Many to Many Polymorphic Relationship

Laravel many to many polymorphic relations, many to many polymorphic relations Laravel, polymorphic relations eloquent Laravel, Laravel morphToMany ex...
Read More

How To Use Chart JS In Laravel 

laravel chart js, laravel chartjs ajax example, how to create chart in laravel, how to use chart js in laravel, chartjs laravel example, laravel chart...
Read More