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