Laravel 9 CKeditor Image Upload Tutorial Example

In this tutorial you will learn about the Laravel 9 CKeditor Image Upload Tutorial Example and its application with practical example.

In this Laravel 9 CKeditor Image Upload Tutorial I will show you how to install and use CKeditor with image upload in laravel 9. In this tutorial, you will learn to install CKeditor with image upload in laravel 9. In this step by step guide you how to integrate CKeditor editor with image upload in laravel 9. Integration of CKeditor editor in laravel form is simple process. I will also show you how to integrate or enable image upload in CKeditor editor.

Table Of Contents−

Laravel 9 CKeditor Image Upload Tutorial Example

While creating forms we come to situation where we may text editor field so that we can insert and save html and other text into database. The CKeditor editor is feature rich wysiwyg html editor allows us to integrate text editor fields in html form.

In this laravel 9 CKeditor with image upload integration example I will guide you through step by step to install and use CKeditor editor with image upload in laravel 9 application. Please follow the instruction given below:

Install Laravel 9
Install CKEditor Package in Laravel
Register CKEditor package in Laravel

Publish the Ckeditor package by command
Add Route
Create Controller Using Artisan Command

Create Blade View
upload and Insert Image in laravel using CKEditor

Install Laravel 9

First of all we need to create a fresh laravel project, download and install Laravel 9 using the below command

 composer create-project --prefer-dist laravel/laravel Blog

1	composer create-project --prefer-dist laravel/laravel Blog

Install CKEditor In Laravel

In this step, we will install CKEditor Package via the composer dependency manager. Use the following command to install CKEditor Package.

composer require unisharp/laravel-ckeditor

1	composer require unisharp/laravel-ckeditor

Register CKEditor package in Laravel

Now, we will register the package in laravel. Go to config/app.php and put the following line to the providers array.

Unisharp\Ckeditor\ServiceProvider::class,

1	Unisharp\Ckeditor\ServiceProvider::class,

Publish the Ckeditor package by command

Now run following command to copy some of the files and folders from ‘vendor\unisharp\laravel-ckeditor’ to ‘public\vendor\unisharp\laravel-ckeditor’.

php artisan vendor:publish --tag=ckeditor

1	php artisan vendor:publish --tag=ckeditor

Add Route

After this, we need to define routes in “routes/web.php” file. Lets open “routes/web.php” file and add the following routes in it.

routes/web.php

use App\Http\Controllers\CkeditorController;

Route::get('ckeditor', [CkeditorController::class, 'index']);

use App\Http\Controllers\CkeditorController;

Route::get('ckeditor', [CkeditorController::class, 'index']);

Create Controller Using Artisan Command

Now, lets create a controller named CkeditorController using command given below –

php artisan make:controller CkeditorController

1	php artisan make:controller CkeditorController

After successfully run the above command and create a controller file. Next open your controller and put the below code into your file.

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
use Validator,Redirect,Response;
  
class CkeditorController extends Controller
{
  
    public function index()
    {
        return view('ckeditor');
    }  
}

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use Validator,Redirect,Response;

class CkeditorController extends Controller

{

public function index()

{

return view('ckeditor');

}

Create Blade View

Now we go resource/views and create a file name ckeditor.blade.php. After this we will create a blade file now put the following code in it:

<!DOCTYPE html>
<html>
<head>
<title>Install and Use CKEditor in Laravel with Image Upload</title>
  
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<meta name="csrf-token" content="{{ csrf_token() }}">
<!--Bootsrap 4 CDN-->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
 
<div class="container-fluid">
    <textarea class="form-control" id="description" name="description"></textarea>
</div>
 
<script src="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
 
<script>
    CKEDITOR.replace( 'description' );
</script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Install and Use CKEditor in Laravel with Image Upload</title>

</head>

<body>

</div>

CKEDITOR.replace( 'description' );

</script>

</body>

</html>

<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>

1	<script src="https://cdn.ckeditor.com/4.13.1/standard/ckeditor.js"></script>

Upload and Insert Image in laravel using CKEditor

Now we have to enable image upload option in ckeditor as following:

<script>
    CKEDITOR.replace( 'description', {
        filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'
    });
</script>

CKEDITOR.replace( 'description', {

filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",

filebrowserUploadMethod: 'form'

});

</script>

Now we will create a route for upload the image in laravel using CKEditor. Open route/web.php file and add the following route into it:

Route::post('ckeditor/image_upload', [CkeditorController::class, 'upload'])->name('upload');

1	Route::post('ckeditor/image_upload', [CkeditorController::class, 'upload'])->name('upload');

Next, open your terminal and run the below command:

php artisan storage:link

1	php artisan storage:link

Next, we will put the below method in our controller. This method will store the image or files in the server and return the image URL.

public function upload(Request $request)
{
    if($request->hasFile('upload')) {
        //get filename with extension
        $filenamewithextension = $request->file('upload')->getClientOriginalName();
   
        //get filename without extension
        $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
   
        //get file extension
        $extension = $request->file('upload')->getClientOriginalExtension();
   
        //filename to store
        $filenametostore = $filename.'_'.time().'.'.$extension;
   
        //Upload File
        $request->file('upload')->storeAs('public/uploads', $filenametostore);
 
        $CKEditorFuncNum = $request->input('CKEditorFuncNum');
        $url = asset('storage/uploads/'.$filenametostore); 
        $msg = 'Image successfully uploaded'; 
        $re = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
          
        // Render HTML output 
        @header('Content-type: text/html; charset=utf-8'); 
        echo $re;
    }
}

public function upload(Request $request)

{

if($request->hasFile('upload')) {

//get filename with extension

$filenamewithextension = $request->file('upload')->getClientOriginalName();

//get filename without extension

$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);

//get file extension

$extension = $request->file('upload')->getClientOriginalExtension();

//filename to store

$filenametostore = $filename.'_'.time().'.'.$extension;

//Upload File

$request->file('upload')->storeAs('public/uploads', $filenametostore);

$CKEditorFuncNum = $request->input('CKEditorFuncNum');

$url = asset('storage/uploads/'.$filenametostore);

$msg = 'Image successfully uploaded';

$re = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";

// Render HTML output

@header('Content-type: text/html; charset=utf-8');

echo $re;

}

AngularJS

CodeIgniter

Laravel

Node Js

Wordpress

More Blog

Learn

ABOUT PAGES

Laravel 9 CKeditor Image Upload Tutorial Example