How to Install and Use Ckeditor in Laravel 9

How to Install and Use Ckeditor in Laravel 9

Laravel 9 CKEditor tutorial example; In this tutorial, you will learn how to install and use CKEditor in laravel 9 apps.

Basically, there is two way to install and use CKEditor in laravel 9 app. But this tutorial will show you a simple way of how to install CKEditor in laravel 9 app.

Laravel 9 Install and Use CKEditor Example Tutorial

Use the following steps to install and use CKEditor in laravel 9 apps:

  • Step 1: Install Laravel 9 App
  • Step 2: Configure Database with App
  • Step 3: Create Post Model & Migration
  • Step 4: Add Fillable Property in Model
  • Step 5: Make Route
  • Step 6: Create Controller
  • Step 7: Create Blade Views File
  • Step 8: Start Development Server

Step 1: Install Laravel 9 App

First of all, Install fresh latest Laravel 9 app. So open a terminal and execute the below-given command for installing the fresh new step of laravel.

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

Step 2: Configure Database with App

Setup database with your downloaded/installed laravel 9 app. So, you need to find .env file and setup database details 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

Step 3: Create Post Model & Migration

Open again your command prompt. And run the following command on it. To create model and migration file for form:

php artisan make:model Post -m

After that, open create_posts_table.php file inside /database/migrations/ directory. And the update the function up() with following code:

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

Then, open again command prompt and run the following command to create tables into database:

php artisan migrate

Step 4: Add Fillable Property in Model

In this step, add the fillable property in Post model, which is located inside app/models directory:

<?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"
    ];
}

Step 5: Make Route

In this step, create routes and add these routes on the web.php file, which is located inside 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"]);

Step 6: Create Controller

In this step, create the controller by command. So open a command line and run the below-given command on the command prompt to create a controller file.

cd your project root directory
//run the command

php artisan make:controller PostController

After successfully creating the controller file. Then open this controller file and update the below code into this:

<?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");
    
    }
}

Step 7: Create Blade Views File

In this step, Visit the resource/views directory and create two files named posts.blade.php and create.blade.php file.

First of all, create a blade view file name posts.blade.php and update the following code into it:

<!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>

Then create the create.blade.php file and update the following code into it:

<!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>

Note that, Don’t forget to add the following cdn file to your blade view file:

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

Step 8: Start Development Server

Now, open terminal and execute the following command on it to start development server:

php artisan serve

Then open browser and fire the following url on it:

http://127.0.0.1:8000/create

Conclusion

Through this tutorial, we have learned how to install and use CKEditor in laravel 9.

Recommended Laravel Tutorials

If you have any questions and suggestions, please use the comment box.

AuthorAdmin

My name is Devendra Dode. I am a full-stack developer, entrepreneur, and owner of Tutsmake.com. I like writing tutorials and tips that can help other developers. I share tutorials of PHP, Python, Javascript, JQuery, Laravel, Livewire, Codeigniter, Node JS, Express JS, Vue JS, Angular JS, React Js, MySQL, MongoDB, REST APIs, Windows, Xampp, Linux, Ubuntu, Amazon AWS, Composer, SEO, WordPress, SSL and Bootstrap from a starting stage. As well as demo example.

One reply to How to Install and Use Ckeditor in Laravel 9

  1. Thanks for this post

    Do you have any idea why every time I add an id to bring up CK EDITOR the form won’t submit.

Leave a Reply

Your email address will not be published. Required fields are marked *