How to Implement CKEditor 5 in Laravel 8 From Scratch

Sometimes we required an advanced text editor in any CMS or web application where we can write text in the form of HTML. The normal text area will not provide the formatting of the content. It always stores the content in a plain format. Hence, in that situation, we required to have this type of editor. There are lots of Text Editors are available which provides the rich text with various functionalities. CKEditor is one of them. It is a WYSIWYG (What You See Is What You Get) rich text editor which enables writing content directly inside of web pages or online applications. It has amazing features for different text formatting, size, colors, images, and many more. This is available as an open-source and commercial. You can download CKEditor in Laravel 8 easily.

In this tutorial, I will gonna show you the integration of CKeditor in Laravel 8 application. Hence, let’s create a new application setup for this.

Prerequisites

We will be integrating the CK Editor in Laravel 8 application. Hence, for creating the new project in Laravel 8, you will have to follow the below requirements.

• PHP >= 7.3
• MySQL (version > 5)
• Apache/Nginx Server
• VS Code Editor
• Composer

Create a New Project to Implement CKEditor

I am going to create a fresh setup in Laravel 8. Then, we will download the CKEditor and further will implement it in this project. To create a project in Laravel 8, I will be using the composer. So, open the terminal and enter the below command.

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

The above command will create a project folder and then install the required files while installing.

After creating the project, we will connect the database with it.

How to Create and Use Database Seeder in Laravel 8

Establish a Database Connection

I will use the MySQL database for managing the tables. So, create a database there. Then, we will connect that database to our project.

CREATE DATABASE laravel_ckeditor;

Here the database is created and ready to configure with the Laravel 8 application.

I have configured with the following details in .env file of the project. You will need to simply replace the database username and password.

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_ckeditor
DB_USERNAME=root
DB_PASSWORD=root

Now, moving to the next step, we will require a model, migration, and a controller. Actually, I will create a basic form to create a post. Inside the form, I will integrate the CKEditor for the post content.

How to Create Pagination in Laravel 8 with Eloquent

Create a Model, Migration, and Controller

You can create a model, migration, and controller together using a single line of command.

php artisan make:model Post -mc

In the above command, the m denotes to the migration. And the c denotes to the controller.

Now, open the migration file that is created with the Post model. Here, we will add some fields for the post.

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

I have added the title and description for the post.

In the next step, we will have to add the fillable data for the Post model.

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class Post extends Model
{
    use HasFactory;
    
    protected $fillable = [
        "title",
        "description"
    ];
}

At last, we will have to migrate the table so that the tables will be generated.

php artisan migrate

The above command will migrate all the tables in the database.

If you want to migrate the specific table instead of all then you can do by putting the path. Here, I am showing you how you can migrate to a single table.

php artisan migrate --path=database/migrations/2020_10_10_060201_create_posts_table.php

The above command will migrate the only Posts table. So, this is very important when you did some changes in a single table.

Then it doesn’t need to migrate all the tables. You can migrate a single table by using the above command.

Download CKEditor For Laravel 8

You can download the CKEditor to implement it in the project. Currently, the latest version is CKEditor 5. You can use its previous version as well. The previous version is CKEditor 4. The latest version (5) is more stable and simple in the variant than the its previous version.

Here this is the official download page of the CKEditor. You can

So, I will be using the latest version that is CKEditor 5 in this project

In the download page, we have the following options.

• It can be used by installing through the npm.
• You can download its zip package and then extract it to the public folder of the project and then include its file.
• In a third way, you can use its CDN, if you don’t want to use the above approach.

I will be using the CDN for the classic editor. This will be the fastest way to use this editor.

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

You can use Inline, and Bubble editor variant for the CKEditor 5. The CDN will be different for all the variants. You can read the documentation for more details.

In the next step, we will require the view where we will include the CDN.

Create Views For CKEditor

I will create two views for this project. The first view will be for creating the post. In this view, I will be integrating the CKEditor 5 using the CDN.

• create-post.blade.php
• index.blade.php

In the second view, I will list out the data which will be saved through the CKEditor.

<!doctype html>
<html lang="en">
  <head>
    <title> Post Listing </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"> CK Editor Implementation in Laravel 8 </h3>
            </div>

            <div class="col-xl-4 text-right">
                <a href="{{url('create-post')}}" 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->description) !!} </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>

In the above snippet, I have listed out the Posts that will return from the PostController. CKEditor creates values with HTML Entity. So, in the database, it will save with the HTML entity by default. For displaying without HTML entity, I have used the html_entity_decode() function in the above snippet.

Now, for creating the post add the below snippet in the create-post.blade.php.

<!doctype html>
<html lang="en">
  <head>
    <title> Create Post - 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('post') }}" class="btn btn-danger"> Back </a>
            </div>
        </div>

        <form action="{{url('save-post')}}" 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"> CK Editor Example in Laravel 8 </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> Description </label>
                                <textarea class="form-control" id="description" placeholder="Enter the Description" name="description"></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( '#description' ) )
            .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>

Now, we will add functionality to create and fetch the post. So, move to the controller file.

Add Functionalities in Controller

We have already created the controller with the model and migration. So, let’s add the below code for creating and displaying the posts.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Post;

class PostController extends Controller
{
    // post listing
    public function index() {
        $posts      =   Post::orderBy("id", "desc")->paginate(5);
        return view("index", compact("posts"));
    }


    // Create Post 
    public function createPost() {
        return view("create-post");
    }

    // Save New Post
    public function savePost(Request $request) {

        $postArray      =   array( 
            "title"  =>  $request->title,
            "description" => $request->description
        );

        $post  =       Post::create($postArray);

        if(!is_null($post)) {
            return back()->with("success", "Success! Post created");
        }

        else {
            return back()->with("failed", "Failed! Post not created");
        }
    }
}

As per the above functions, we will add the routes.

Add Routes

We will have to add some routes in the web.php file. So, that we can have the URL(s).

<?php

use App\Http\Controllers\PostController;
use Illuminate\Support\Facades\Route;



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

Route::get("create-post", [PostController::class, "createPost"]);

Route::post('save-post', [PostController::class, "savePost"]);

After adding the routes, our application is ready to run.

http://localhost:8000/post

This is the listing of the posts. There is an option to Add Post.

When you click on the Add Post, it will open the below screen.

After filling up the details a successful project creation will be showing you the below result.

Conclusion

Conclusively, we have implemented the CKEditor 5 in Laravel 8 application. We seen the different approach of using the CKEditor in our application. Like using npm install, downloading source file and the CDN. So, the fastest way is using the CDN. Also, we have seen the different variant of the CKEditor 5. The variant is Classic, Inline and Bubble. Every variant will have it’s own CDN. So, don’t try to use it’s variant with a single CDN It won’t work. Also, you cannot use the multiple variant in a single page. I hope it will be a helpful guide for you.