This content originally appeared on DEV Community and was authored by Tahsin Abrar
This documentation provides a step-by-step guide to implementing CKEditor in a Laravel project. The example includes setting up the CKEditor in an admin panel for content creation and displaying the content on a frontend view.
Prerequisites
- Laravel installed on your local machine
- Basic knowledge of Laravel framework and Blade templating engine
Step 1: Set Up Routes
Add the following routes to your web.php file to handle displaying the CKEditor form, viewing the content, and uploading images.
// frontend page
Route::get('ck-view', [CkController::class, 'ckView'])->name('ck-view');
// admin page
Route::get('ck-admin', [CkController::class, 'index'])->name('ck-admin');
Route::post('create', [CkController::class, 'store'])->name('create');
Route::post('update', [CkController::class, 'imageUpload'])->name('ck.upload');
Step 2: Create the Blade Files
Admin Blade File (admin.blade.php)
Create a Blade file admin.blade.php for the admin panel where the CKEditor will be integrated.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CkEditor</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-sm-8">
<form method="POST" action="{{ route('create') }}">
@csrf
<input type="text" name="title" class="form-control mb-3" placeholder="Title">
<textarea name="editor" id="editor" class="form-control mt-3" placeholder="Description"></textarea>
<button class="btn-primary btn mt-3" type="submit">Submit</button>
</form>
</div>
</div>
</div>
<script src="https://cdn.ckeditor.com/ckeditor5/34.0.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create(document.querySelector('#editor'), {
ckfinder: {
uploadUrl: '{{ route('ck.upload') . '?_token=' . csrf_token() }}',
}
})
.catch(error => {
console.error(error);
});
</script>
</body>
</html>
View Blade File (view.blade.php)
Create a Blade file view.blade.php to display the content stored in the database.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CkEditor</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body class="post-content">
@foreach ($data as $note)
{!! $note->content !!}
@endforeach
</body>
</html>
Step 3: Create the Controller
Create a CkController.php file and add the following code:
<?php
namespace App\Http\Controllers;
use App\Models\Ck;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Str;
class CkController extends Controller
{
public function ckView()
{
$data = Ck::all();
return view('ck-view', compact('data'));
}
public function index()
{
return view('ck-admin');
}
public function store(Request $request)
{
$note = Ck::create([
'content' => $request->input('editor'),
]);
$request->session()->flash('success', 'Note created successfully.');
return redirect()->route('ck-admin');
}
public function imageUpload(Request $request)
{
if ($request->hasFile('upload')) {
try {
$file = $request->file('upload');
$extension = $file->getClientOriginalExtension();
$randomFileName = Str::random(40) . '.' . $extension;
$file->move(public_path('media'), $randomFileName);
$url = asset('media/' . $randomFileName);
return response()->json([
'fileName' => $randomFileName,
'uploaded' => 1,
'url' => $url,
]);
} catch (\Exception $e) {
Log::error('File upload error: ' . $e->getMessage(), [
'exception' => $e,
'trace' => $e->getTraceAsString(),
'request' => $request->all(),
]);
return response()->json(['error' => 'File upload failed. Please try again.'], 500);
}
}
return response()->json(['error' => 'No file uploaded.'], 400);
}
}
Step 4: Database Migration and Model
Create a migration and model for the Ck table.
php artisan make:model Ck -m
Update the migration file to include the necessary fields:
public function up()
{
Schema::create('cks', function (Blueprint $table) {
$table->id();
$table->text('content');
$table->timestamps();
});
}
Run the migration:
php artisan migrate
Update the Ck model:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Ck extends Model
{
use HasFactory;
protected $fillable = ['content'];
}
This content originally appeared on DEV Community and was authored by Tahsin Abrar
Print
Share
Comment
Cite
Upload
Translate
Updates
There are no updates yet.
Click the Upload button above to add an update.
APA
MLA
Tahsin Abrar | Sciencx (2024-06-20T18:46:57+00:00) Laravel CKEditor Implementation. Retrieved from https://www.scien.cx/2024/06/20/laravel-ckeditor-implementation/
" » Laravel CKEditor Implementation." Tahsin Abrar | Sciencx - Thursday June 20, 2024, https://www.scien.cx/2024/06/20/laravel-ckeditor-implementation/
HARVARDTahsin Abrar | Sciencx Thursday June 20, 2024 » Laravel CKEditor Implementation., viewed ,<https://www.scien.cx/2024/06/20/laravel-ckeditor-implementation/>
VANCOUVERTahsin Abrar | Sciencx - » Laravel CKEditor Implementation. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/06/20/laravel-ckeditor-implementation/
CHICAGO" » Laravel CKEditor Implementation." Tahsin Abrar | Sciencx - Accessed . https://www.scien.cx/2024/06/20/laravel-ckeditor-implementation/
IEEE" » Laravel CKEditor Implementation." Tahsin Abrar | Sciencx [Online]. Available: https://www.scien.cx/2024/06/20/laravel-ckeditor-implementation/. [Accessed: ]
rf:citation » Laravel CKEditor Implementation | Tahsin Abrar | Sciencx | https://www.scien.cx/2024/06/20/laravel-ckeditor-implementation/ |
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.