Uploading image with CKEditor and KCFinder in Laravel 5

2019-09-17 12:51:04 Anuj Mistri Laravel

Integrating CkEditor in Laravel

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

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



Ps: By default, all the uploaded images are stored in 'public/ckeditor/ckfinder/upload/images/' directory of your app. You can change the path whatever you want.

This post is submitted by one of our members. You may submit a new post here.

Related Tricks