Laravel CKEditor Implementation

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'];
}