How to Install and Use CKEditor in Laravel

Using this Laravel 9 CKEditor Example Tutorial we will show you how to install and use CKEditor in Laravel and store the records in database. In modern time we need to use rich textbox editors for textarea in our laravel application, So here we suggest you to CKEditor which is the best wide range.

CKEditor provide listing, image upload, link, font style, bold, italic etc. If you are using CKEditor in your project then we have added some code for displaying the editor and how your show this content in your blade file.

How to Install and Use CKEditor in Laravel

Use to follow the following steps to install and use CKeditor in laravel application;

  • Step 1: Install Laravel App
  • Step 2: Connec App to Database
  • Step 3: Create Migration and Model File
  • Step 4: Make Routes
  • Step 5: Create Controller
  • Step 6: Create Blade File
  • Step 7: Display content in view file
  • Step 8: Run Development Server

Step 1: Install Laravel App

In the beginning, open a terminal window and use the suggested command to create a fresh laravel application:

composer create-project --prefer-dist laravel/laravel laravel-summernote-example

Go inside the app:

cd laravel-summernote-example

Step 2: Connect Database to App

Next, insert database details in .env config file, it makes the laravel connection with the database:

 DB_DATABASE=database name here
 DB_USERNAME=database username here
 DB_PASSWORD=database password here

Step 3: Create Model and Migration File

In this step, create a migration for post table and post Model in laravel app. So run the following command on command prompt:

php artisan make:model Post -m

Next, Navigate to database/migrations and open create_posts_table.php then put the following code on it;

public function up()
    Schema::create('posts', function (Blueprint $table) {

Now run the migration command for generating new posts table in database:

php artisan migrate

After that go to App/Models directory and open Post.php model file then add the following code in it;

namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
    use HasFactory;
    protected $fillable = ['title','description'];

Step 4: Make Routes

Now you need to create routes go in routes/web.php. Then add the following routes into web.php file, as follow:

use App\Http\Controllers\PostController;

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

Step 5: Create Controller

In this step, execute the following command to create one controller file name PostController.php:

php artisan make:controller PostController

After running this command you will find new file in this path “app/Http/Controllers/PostController.php”. Open the file and put the below code on it:

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"));
    public function create() {
        return view("create");

    public function store(Request $request)
        $input = $request->all();
        return redirect()->back();


Step 6: Create Blade Files

In this step, Visit resource/views direcotry and create two files name 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">
    <title> Laravel 8 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="" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
      table td p {
      word-break: break-all;
    <div class="container mt-4">
      <div class="row">
        <div class="col-xl-8">
          <h3 class="text-right"> Laravel 8 CKEditor Integration Example</h3>
        <div class="col-xl-4 text-right">
          <a href="{{url('create')}}" class="btn btn-primary"> Add Post </a>
      <div class="table-responsive mt-4">
        <table class="table table-striped">
            <th> Id </th>
            <th style="width:30%;"> Title </th>
            <th> Decription </th>
          @foreach($posts as $post) 
              <td> {{ $post->id }} </td>
              <td> {{ $post->title }} </td>
              <td> {!! html_entity_decode($post->body) !!} </td>
      {{ $posts->links() }}
    <script src="" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

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

<!DOCTYPE html>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>CKEditor Install and Use in Laravel with</title>
  <link rel="stylesheet" href="">

<div class="container mt-4">
  <h2>CKEditor Install and Use in Laravel with- <a href=""></a></h2>
    <form method="post" id="upload-image-form" enctype="multipart/form-data">
        <div class="form-group">
            <label><strong>Title :</strong></label>
            <input type="text" name="title" class="form-control">

        <div class="form-group">
            <label><strong>Description :</strong></label>
            <textarea class="ckeditor form-control" name="description"></textarea>

        <div class="form-group">
          <button type="submit" class="btn btn-success">Save</button>


<script src="//"></script>
<script type="text/javascript">
    $(document).ready(function() {

Step 7: Display Content in View File

Once the data is saved in database and you want to display the ckeditor content in your laravel blade file then you need to below option to displaying it.

{!! $post->description !!}

Step 7: Start Development Server

Finally, run the following php artisan command to start development server:

php artisan serve

Now, open your browser and hit the following URL on it:


Finally Laravel Integrate ckeditor Example Tutorial is completed now. You have learned how to install and use CKeditor Editor in Laravel Application with example;

See Also: How to use Summernote Editor in Laravel Example

2 thoughts on “How to Install and Use CKEditor in Laravel”

Leave a Comment