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 whereDate and whereDay Example

laravel whereDate and whereDay example, whereDate, whereDay, where condition in laravel, laravel date format, wheredate and whereDay in laravel 8
Read More

Google Map with Multiple Marker and Info Box in Laravel

This tutorial will teach you how to use Laravel to integrate a Google Map with numerous markers and an info box.
Read More

Laravel Has Many Through Eloquent Relationship

Laravel has many through pivot table, Laravel has many through relationship example, has_many through relationship Laravel, hasmanythrough laravel inv...
Read More

Laravel 9 ConsoleTvs Charts Tutorial Example

consoletvs/charts laravel 9 ,consoletvs charts laravel 9 ,laravel 9 chart consoletvs ,consoletvs/charts laravel 9 tutorial ,laravel charts,laravel ch...
Read More

Laravel 8 Generate PDF File using DomPDF | Laravel 8 PDF

How to generate pdf from view, html, blade in laravel 8. Here, we would share with you how to generate pdf file from blade view in laravel 8
Read More