Surfe.be - passive income

How to add CKEditor with image upload using KCFinder in Laravel

ckEditor with image upload

It is pretty awesome to add multiple image with image upload using KCFinder . Now, i will give you few step to set CKeditor with file uploading and you will easily apply this. this is a very simple to browse your image, file etc upload.  if you are use simply in php then it is very simple. but if you are set laravel then you fetch many problem like i also fetch lots of problem. To do it just follow the below Step .

add kc finder in ckeditor

Add kcFinder in ckEditor

Step 1 : Download CKEditor 

download ckeditor from http://ckeditor.com/download 

Step 2 : Download KCFinder

 next download kcfinder for image uploading  http://kcfinder.sunhater.com/download.

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 3 : 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.

kc finder
    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 : Create View Blade File 

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

<html>

	<head>
	  <title>Laravel- 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>

That’s it. Hope this tutorial will help you. If you like this tutorial please leave a comment and don’t forget to share .

Leave a comments

LET'S SOCIALITE

Recent Tweets