Laravel 11 CKEditor example; Through this tutorial, i am going to show you how to install and use CKEditor in Laravel 11 apps.
How to Install and Use CKEditor in Laravel 11
Follow the below steps to install and use CKEditor in Laravel 11 apps:
- Step 1: Install Laravel 11 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 11 App
Run the below-given command on command prompt to install the fresh new step of laravel.
composer create-project --prefer-dist laravel/laravel Blog
Step 2: Configure Database with App
Configure database with your downloaded/installed Laravel 11 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
To 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
To 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
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
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 11 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 11 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 11 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 11 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
Run the following command on command prompt 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, you have learned how to install and use CKEditor in Laravel 11.