Step 1: Install Laravel 10 App
composer create-project laravel/laravel example_app
Step 2: Create Route
In this step, we will add three routes with GET and POST method in routes/web.php file. so let's add it.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CkeditorController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('ckeditor', [CkeditorController::class, 'index']);
Route::post('ckeditor/upload', [CkeditorController::class, 'upload'])->name('ckeditor.upload');
Step 3: Create Controller
app/Http/Controllers/CkeditorController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\JsonResponse;
class CkeditorController extends Controller
{
/**
* Write code on Method
*
* @return response()
*/
public function index(): View
{
return view('ckeditor');
}
/**
* Write code on Method
*
* @return response()
*/
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]);
}
}
}
Step 4: Create View File
Let's create ckeditor.blade.php for display form with CkEditor and put following code:
resources/views/ckeditor.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Ckeditor Image Upload Example - webthestuff.com</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.ck-editor__editable_inline {
min-height: 300px;
}
</style>
</head>
<body>
<div class="container">
<h1>Laravel Ckeditor Image Upload Example - webthestuff.com</h1>
<form>
<div class="form-group">
<strong>Title:</strong>
<input type="text" name="title" class="form-control" placeholder="Title" value="{{ old('title') }}">
</div>
<div class="form-group">
<strong>Slug:</strong>
<input type="text" name="slug" class="form-control" placeholder="Slug" value="{{ old('slug') }}">
</div>
<div class="form-group">
<strong>Body:</strong>
<textarea name="editor" id="editor"></textarea>
</div>
<div class="form-group">
<button class="btn btn-success" type="submit">Submit</button>
</div>
</form>
</div>
<script src="https://cdn.ckeditor.com/ckeditor5/34.2.0/classic/ckeditor.js"></script>
<script>
ClassicEditor
.create( document.querySelector( '#editor' ),{
ckfinder: {
uploadUrl: '{{route('ckeditor.upload').'?_token='.csrf_token()}}',
}
})
.catch( error => {
} );
</script>
</body>
</html>
Run Your Laravel App:
php artisan serve
Now, Go to Browser, and type URL and view the output:
http://localhost:8000/ckeditor
