While we are developing Applications on Laravel 11 framework sometimes we need rich text area fields. In these kind of cases, CKEditor is one of the best option for us. This tutorial will guide you through the process of integrating CKEditor with CKFinder for image upload to the server in Laravel App.
Table Of Content
1 Prerequisites
1.) PHP version of 8.2
2.) MySql
3.) CKEditor 5
2 Introduction
In this article, I am going to show you how to Integrate CKEditor 5 to your Laravel 11 Application.
3 Create / Install a Laravel Project
3.1 Install Laravel Project
First, make sure your computer has a composer.
Use the following command to install new Laravel Project.
Upon Successful Transaction, the payment trasactions data will be stored in the database. This process involves accessing the .env file to input and define the database credentials.
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('posts',function(Blueprint $table) {
$table->increments('id');
$table->string('title');
$table->longText('description');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
//
}
};
Use the following command to run the migration to update your database.
php artisan migrate
app/Models/Post.php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Post extends Model
{
use HasFactory;
protected $table = 'posts';
protected $guarded = ['id'];
}
6 Create New Controller - CkeditorController
Now create a controller "CkeditorController" and add index() and store() methods, also Create "media" folder under Public Directory to store Images
Use the following artisan command to Create Controller.
php artisan make:controller CkeditorController
app/Http/Controllers/CkeditorController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
use App\Models\Post;
class CkeditorController extends Controller
{
public function index(): View
{
return view('post');
}
public function upload(Request $request): JsonResponse
{
if ($request->hasFile('upload')) {
$originName = $request->file('upload')->getClientOriginalName();
$fileName = pathinfo($originName, PATHINFO_FILENAME);
$extension = $request->file('upload')->getClientOriginalExtension();
$fileName = $fileName . '_' . time() . '.' . $extension;
$request->file('upload')->move(public_path('media'), $fileName);
$url = asset('media/' . $fileName);
return response()->json(['fileName' => $fileName, 'uploaded'=> 1, 'url' => $url]);
}
}
public function store(Request $request)
{
$post=new Post;
$post->title=$request->title;
$post->description=$request->description;
$post->save();
return redirect()->back()->with('message',"Post Created Successful");
}
}
?>
7 Define a Route
Define routes for the CkeditorController in the web.php file routes/web.php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CkeditorController;
Route::get('ckeditor', [CkeditorController::class, 'index']);
Route::post('ckeditor/upload', [CkeditorController::class, 'upload'])->name('ckeditor.upload');
Route::post('/store',[CkeditorController::class,'store'])->name('ckeditor.store');
8 Create Payment Blade File
Create View "post.blade.php" File to Show Form resources/views/post.blade.php
