How to enable image uploader in CKeditor 4 in Laravel 5

CKEditor is  one of the best WYSIWYG editor available for your websites. Today’s tutorial I will show you how to use image upload in CKEditor using Laravel. This option let you upload an image from your computer or a direct link from other website.

You can see the result of the tutorial as shown in the below picture.

enable image uplaoder in CKeditor 4 in Laravel 5

 

So first is first go to this link and Download CKeditor source code from CKEditor website.

Extract the CKEditor files and move to the Laravel’s public folder.

Include the CKEditor main JavaScript file to your Laravel blade template. You can see this in the below template that I have added the filebrowserUploadUrl in the config section. And corresponding image upload URL has been in place for the PHP file upload option. You may notice the csrf_token is included the url to avoid the failure of cross site validation in Laravel.

Once you have done with blade template, we can move to the main upload part in the controller. So whenever you select an image and send to server you will call the above URL mentioned in the CKEDITOR config.

You have to use this Facade in order to work the Input class use

Illuminate\Support\Facades\Input;

in routes/web.php

Route::post('upload_image','CkeditorController@uploadImage')->name('upload');
in app/Http/Controllers/CkeditorController.php
 

 

Editorial Staff
 

Editorial Staff at tutsplanet is a dedicated team to write various tutorial articles.