If you want to use Ckeditor in Laravel application. So In this tutorial, you will learn how to install and use CKEditor in Laravel 10.
How to Integrate and Use CKEditor (WYSIWYG) in Laravel 10
By using the following steps, you can install and use CKEditor in laravel 10 apps:
- Step 1: Setup New Laravel 10 Project
- Step 2: Setup Database with Laravel Project
- Step 3: Create Model & Migration For Post Table
- Step 4: Add Fillable Property in Model
- Step 5: Define Routes
- Step 6: Create a Controller File
- Step 7: Create Blade Views File
- Step 8: Start Development Server
Step 1: Setup New Laravel 10 Project
First of all, Install fresh latest Laravel 10 app. So open the terminal or command prompt.
Then execute the below-given command into it to install the fresh new step of laravel.
composer create-project --prefer-dist laravel/laravel Blog
Step 2: Setup Database with Laravel Project
Once you have installed laravel project on your server. Then you need to configure your database with your apps.
So, visit your app root directory and find .env file. Then configure 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 Model & Migration For Post Table
Open again your command prompt or terminal. And then execute the following command into it to create model and migration file:
php artisan make:model Post -m
After that, open create_posts_table.php file inside /database/migrations/ directory. And then 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();
});
}
Once you have updated up function in migration file. Now, you need to open again command prompt and run the following command to create tables in database:
php artisan migrate
Step 4: Add Fillable Property in Model
In this step, you need 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: Define Routes
In this step, you need to define the following routes on the web.php file, which is located inside the 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 a Controller File
In this step, you need to create the controller.
So open command prompt or terminal and execute the following command into it to create controller file.
cd your project root directory
//run the command php artisan make:controller PostController
Once you have executed the above-given command. Now open this controller file and addthe 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 resource/views directory 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">
<head>
<title> Laravel 10 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 10 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:
<!doctype html>
<html lang="en">
<head>
<title> Laravel 10 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 10 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 command prompt or terminal and execute the following command on it to start the development server:
php artisan serve
Then open browser and fire the following url on it:
http://127.0.0.1:8000/create
Conclusion
How to install and use CKEditor in Laravel 10 tutorial, You have learned how to install and use CKEditor in Laravel 10.
Recommended Laravel Posts
If you have any questions and suggestions, please use the comment box.
