How To Add CKEditor With Image Upload Using KCFinder In Laravel

Hey Artisan

Today i will show you how to add ckeditor with image upload using kcfinder in laravel 7 application. It is very important cause sometime we need to upload multiple image from backend using ckeditor.

So using kcfinder we can do it so easily. If you add knfinder in your ckeditor then you can upload image very easily. if you don't know how to add knfinder to ckeditor. Don't worry, i wll help you to learn laravel ckeditor image upload.

I will show step by step that how we can add kcfinder in ckeditor in laravel 7 application. Let's do this step by step how to add ck editor in laravel.

It is a common issue that after adding ckeditor in laravel php application, we can't show browse button. ckeditor image upload browse button will be the key problem and we will solve this issue ckeditor image upload not working laravel.

Add kcFinder in ckEditor



Now let's start to complete

Step 1 : Download CKEditor


download ckeditor from

Step 2 : Download KCFinder


next download kcfinder for image uploading. 

Step 3 : Create A New Folder


then create new folder like : ‘templateEditor' in your public directory and put both folder there.(public/Editor/ckeditor and public/templateEditor/kcfinder). Hope you got it 

Step 4 : Setup public/templateEditor/ckeditor/config.js


Now we have to setup our config.js file which is located inside public/templateEditor/ckeditor/config.js . open public/templateEditor/ckeditor/config.js and put code as i have showed below.

CKEDITOR.editorConfig = function(config) {
    // Define changes to default configuration here. For example:  
    // config.language = 'fr';  
    // config.uiColor = '#AADC6E';  
    config.filebrowserBrowseUrl = '/templateEditor/kcfinder/browse.php?opener=ckeditor&type=files';
    config.filebrowserImageBrowseUrl = '/templateEditor/kcfinder/browse.php?opener=ckeditor&type=images';
    config.filebrowserFlashBrowseUrl = '/templateEditor/kcfinder/browse.php?opener=ckeditor&type=flash';
    config.filebrowserUploadUrl = '/templateEditor/kcfinder/upload.php?opener=ckeditor&type=files';
    config.filebrowserImageUploadUrl = '/templateEditor/kcfinder/upload.php?opener=ckeditor&type=images';
    config.filebrowserFlashUploadUrl = '/templateEditor/kcfinder/upload.php?opener=ckeditor&type=flash';


Step 5 : add code in your main blade file like as i give you under :



Read also :  Ckeditor required field validation example in Jquery


hope it can help you. 


#laravel #ckeditor #image-upload #kc-finder