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 http://ckeditor.com/download

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.