How to add ckeditor with image upload in Laravel ?

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

Today now in this blog I will show you how to add ckeditor with image upload in laravel. If you want to use ckeditor in your laravel application and also you want to add file uploading system as well. You can use it simply in php beacuse it is very simple. But if you want to set it on laravel application then that time you will fetch many problems as like as i was also fetch lots of problem.

Now, here i will give you some step to set ckeditor also with file uploading and then you will easily apply this. So now this is a very simple to browse your image, file etc upload.

use ckeditor in php, use ckeditor in laravel, how to use ckeditor in laravel 8, how to add ckeditor in laravel 8, laravel ckeditor image upload, laravel ckeditor example, laravel ckeditor sample, ckeditor laravel 6, ckeditor laravel 5.8, what is laravel rich text editor

Step 1 : At first need to download ckeditor from its official website, Click here : http://ckeditor.com/download

Step 2 : Now next download kcfinder for image uploading. Click here : http://kcfinder.sunhater.com/download.

Step 3 : So then need to create new folder like : ‘templateEditor’ in your public directory and then put both folder there.(public/templateEditor/ckeditor and public/templateEditor/kcfinder).

Step 4 : open need to public/templateEditor/ckeditor/config.js and put code as i under :

/** 
 * @license Copyright (c) 2003-2015, CKSource - Frederico Knabben. All rights reserved. 
 * For licensing, see LICENSE.md or http://ckeditor.com/license 
 */
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 :

<head>
  <title>Laravel</title>  
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>  
  <script src="/templateEditor/ckeditor/ckeditor.js"></script>  
</head>
<body>
  
  <textarea id="editor1" class="ckeditor"></textarea>  
  
  <script type="text/javascript">  
     CKEDITOR.replace( 'editor1' );  
  </script>  
  
</body>

Read Also : How to get last 30 days record in laravel?

Thanks for read this, I hope it will you. You can also 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 →