Uploading image with CKEditor and KCFinder in Laravel 5.4

In this tutorial i am going to show you how to integrate CKEditor and KCFinder plugin with image upload functionality in Laravel 5.4.

Below are the step by step guide for integrating CKEditor and KCFinder plugin in laravel 5.

Step 1 : Download ckeditor

Download latest version of Ckeditor from http://ckeditor.com/download

Step 2 : Download kcfinder for image uploading

Download latest version of kcfinder from http://kcfinder.sunhater.com/download

Step 3: Extract and Move the files

inside ‘public’ directory create a directory ‘ckeditor’ and move both ckeditor and ckfinder files. After that extract both of zip files and rename ‘kcfinder-master’ as ‘kcfinder’.

Step 4 : Configuration

Configuring kcfinder in CkEditor.

Open ‘config.js’ file which is located in ‘public/ckeditor/ckeditor/’ directory and add below line of in it.

CKEDITOR.editorConfig = function( config ) {
	----------------------------
	-------------------------
	----------------------------


    config.filebrowserBrowseUrl = 'public/ckeditor/kcfinder/browse.php?opener=ckeditor&type=files';

    config.filebrowserImageBrowseUrl = 'public/ckeditor/kcfinder/browse.php?opener=ckeditor&type=images';

    config.filebrowserFlashBrowseUrl = 'public/ckeditor/kcfinder/browse.php?opener=ckeditor&type=flash';

    config.filebrowserUploadUrl = 'public/ckeditor/kcfinder/upload.php?opener=ckeditor&type=files';

    config.filebrowserImageUploadUrl = 'public/ckeditor/kcfinder/upload.php?opener=ckeditor&type=images';

    config.filebrowserFlashUploadUrl = 'public/ckeditor/kcfinder/upload.php?opener=ckeditor&type=flash';
};

Configuring Ckeditor settings

Open ‘public/ckeditor/ckfinder/conf/config.php’ file and change ‘disabled’ => true’ to ‘disabled’ => false.

Adding routes

 Route::get('ckeditor-demo',function(){
       return view('ckeditor.index');
});

Creating your View

create a file named ‘index.blade.php’ inside ‘resources/views/ckeditor’ directory and add below code in it.


 <!DOCTYPE html>
 <html lang="en">
 <head>
 <title>CKeditor Demo with KCFinder in Laravel 5.4 </title>
  <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
   <script src="{{asset('public/templateEditor/ckeditor/ckeditor.js')}}"> </script> 
 </head>
 <body>
 
 <div class="container">
   <div class="panel panel-success">
     <div class="panel-heading">Integrating CKeditor in Laravel 5.3 </div>
     <div class="panel-body">
       <textarea id="ckeditor" class="ckeditor"> </textarea>  
       <script type="text/javascript">  

        CKEDITOR.replace( 'ckeditor' );  

       </script>  
     </div>
   </div>
 </div>

 </body>
 </html>

Ps: By default all the uploaded images are stored in ‘public/ckeditor/ckfinder/upload/images/’ directory of your app. You can change the path what ever you want.

Leave a Reply

Your email address will not be published. Required fields are marked *