How to add CKEditor with image upload using KCFinder in PHP Example Code?

Share Me
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Today now in this post i will show you How to add CKEditor with image upload using KCFinder in PHP Example Code? Here We will know about how to implement ckeditor with image uploading in PHP project. If you need to use ckeditor in your PHP project and you also want to add the file uploading as well as then you can do this easily just need to follow bellow step.

Now in this example i will use ckeditor also with KCFinder for image uploading. KCFinder through we can easily file upload by using their api. If we don’t know about the ckeditor and KCFinder then no issue you can add this simple way.

Now, here i will give you few step to set the ckeditor with file uploading and we will easily apply this. So this is a very simple to browse our image, file etc for upload.

Step 1 : Download CKEditor

Now in this step we need to download the ckeditor from its official website, here i mean that link in bellow : http://ckeditor.com/download and extract in your root folder.

Step 2 : Download KCFinder

So in this step we need to download ckeditor from its official website, here i mean that : http://kcfinder.sunhater.com/download and extract in our root folder. Then also change the folder name just like “kcfinder”.

Step 3 : Configuration

Now in this step we need to add Configuration for file uploading, so just need to open config.js in ckeditor and put the bellow code:

ckeditor/config.js

CKEDITOR.editorConfig = function(config) {
    config.filebrowserBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=files';
    config.filebrowserImageBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=images';
    config.filebrowserFlashBrowseUrl = '/kcfinder/browse.php?opener=ckeditor&type=flash';
    config.filebrowserUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=files';
    config.filebrowserImageUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=images';
    config.filebrowserFlashUploadUrl = '/kcfinder/upload.php?opener=ckeditor&type=flash';
};
Step 4 : Index File

Now we are in last step, you need to create a index.php file and then put bellow code. If you will find an error as like “You don’t have permissions to upload files” then follow this link to solve : How to solve – you do not have permission to upload files in KCFinder ?.

index.php

<html>
	<head>
	  <title>PHP - CKEditor with Image upload</title>
	  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  
	  <script src="/ckeditor/ckeditor.js"></script>  
	</head>
	<body>


	  <textarea id="editor1" class="ckeditor"></textarea>  


	  <script type="text/javascript">  
	     CKEDITOR.replace( 'editor1' );  
	  </script>  


	</body>
</html>

Read Also : How to Create Custom Blade Directive in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →