Laravel Install and Integrate CKEditor Example

Jan 05, 2023 . Admin



Hello Friends,

It's a quick tutorial on how to instal and integrate a ckeditor example in Laravel. How to instal and utilise the ckeditor in Laravel is covered in detail in this post. I'd like to demonstrate how to integrate CKEditor with Laravel. Laravel will be used to implement CKEditor.

There are essentially two ways to instal and use CKEditor in a Laravel 8 application. However, this guide will demonstrate an easy method for installing CKEditor in a Laravel 8 application.

Now let's start.

Step 1:Install Laravel Application

This is optional; however, if you have not created the laravel app, then you may go ahead and execute the below command:

composer create-project laravel/laravel example-app
Step 2: Connecting App to Database
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=post
DB_USERNAME=root
DB_PASSWORD=root
Step 3: Create Post Model & Migration

Open up 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  
database/migrations/create_posts_table.php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;

class PostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->text('body');
            $table->timestamps();
        });
    }
    
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');        
    }
}   

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:

App/Models/Post.php
<?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
<?php

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

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/  

Route::get('posts', [PostController::class, "index"]);
Route::get("create", [PostController::class, "create"]);
Route::post('store', [PostController::class, "store"]); 
Step 6: Create Controller
php artisan make:controller PostController  
App/Http/Controllers/PostController
<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
use App\Models\Post;
 
class PostController extends Controller
{
    /**
      * Write code on Method
      *
      * @return response()
      */ 
    public function index() {
 
        $posts =  Post::orderBy("id", "desc")->paginate(5);
 
        return view("posts", compact("posts"));
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function create() {
 
        return view("create");
    }
 
    /**
     * Write code on Method
     *
     * @return response()
     */
    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 resources/views/posts.blade.php
<html lang="en">
<head>
    <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 8 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 create.blade.php file and update the following code into it:

resources/views/create.blade.php
<html lang="en">
<head>
    <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 8 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:9
<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    

I hope it can help you...

#Laravel