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-exampleGo inside the app:
cd laravel-summernote-exampleStep 2: Connect Database to App
Next, insert database details in .env config file, it makes the laravel connection with the database:
DB_CONNECTION=mysql DB_HOST=127.0.0.1 DB_PORT=3306 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 -mNext, 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) {
$table->id();
$table->string('title');
$table->longText('description');
$table->timestamps();
});
}Now run the migration command for generating new posts table in database:
php artisan migrateAfter that go to App/Models directory and open Post.php model file then add the following code in it;
<?php
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 PostControllerAfter 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:
<?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"));
}
public function create() {
return view("create");
}
public function store(Request $request)
{
$input = $request->all();
Post::create($input);
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">
<head>
<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="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>
<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() }}
</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>
<head>
<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="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<h2>CKEditor Install and Use in Laravel with- <a href="https://codingdriver.com/">codingdriver.com</a></h2>
<form method="post" id="upload-image-form" enctype="multipart/form-data">
@csrf
<div class="form-group">
<label><strong>Title :</strong></label>
<input type="text" name="title" class="form-control">
</div>
<div class="form-group">
<label><strong>Description :</strong></label>
<textarea class="ckeditor form-control" name="description"></textarea>
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
</div>
</form>
</div>
<script src="//cdn.ckeditor.com/4.14.0/standard/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.ckeditor').ckeditor();
});
</script>
</body>
</html>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 serveNow, open your browser and hit the following URL on it:
http://localhost:8000/postsFinally 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
asac