Laravel 7/6 CKEditor with Image Upload

In this tutorial you will learn about the Laravel 7/6 CKEditor with Image Upload and its application with practical example.

In this Laravel 7/6 CKEditor with Image Upload tutorial I will show you how to install and use CKEditor with image upload in laravel. In this tutorial, you will learn to install CKEditor in laravel using the command line. In this step by step guide I also show you how to upload images and files in laravel with CKEditor.

Table Of Contents−

Laravel 7/6 CKEditor with Image Upload

Install Laravel
Install CKEditor Package in Laravel

Register CKEditor package in Laravel
Publish the Ckeditor package by command
Create Route

Generate Controller
Create Blade View
Upload and Insert Image in laravel using CKEditor

1. Install Laravel

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

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

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

2. 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

3. 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,

4. 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

5. Create 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

Route::get('/ckeditor', 'CkeditorController@index');

1	Route::get('/ckeditor', 'CkeditorController@index');

6. Generate Controller

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');

}

7. 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>

Note:- If the package of ckeditor is having some problem installing your Laravel web application. Then you add the following cdn file to your blade view file:

<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>

8. 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.

Route::post('ckeditor/image_upload', 'CKEditorController@upload')->name('upload');

1	Route::post('ckeditor/image_upload', 'CKEditorController@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 name CKEditor. 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 7/6 CKEditor with Image Upload