In this tutorial we are going to integrate responsive file manager in ckeditor in laravel 5.5. Laravel file manager makes us easy to upload files and images directly into the server by drag and drop feature from ckeditor image upload button.

If you followed by previous tutorial regarding how to integrate CK-Editor 4 in Laravel 5.5 this would be a next part series of the same tutorial that i recently wrote.  If you haven’t read that post then you might want to take a look at that.

Learn : How to Install Ckeditor on Laravel

Lets get started :-

What we are going to do ?

1. Download responsive file manager from their official website.
2. Integrate responsive file manager into ck-editor.

To know little more about responsive file manager is that, its free and open source & can be easily be integrated with editors like tinymce, CLEditor and CK-Editor. We can freely use it in our commercial projects giving them their credit.

Step 1 :-

Extract responsive file manager zip package into ckeditor folder inside your public folder of laravel project.

Make sure your have exactly kept in this same structure else you might have to change the URLS according to the folder structure you have extracted files into.

Step 2:-

Lets get back where we left off in previous post in integrating ckeditor in laravel. If you check our create.blade.php this is the last code we will see at the end of index.blade.

Now, we will add the file manager code so that browse server button will appear so that we can browse through images in ckeditor. Just replace the above code with the code provided below.

Step 3:-

Now, its time to set the image path for editor. Open config.php file inside public/ckeditor/filemanager/config/ and go to line 76.

'upload_dir' => '/source/',

Change the code of line number 76 with the code below :-

'current_path' => '../source/',

Thats, it once you are done check your editor and browse for images and files. If you any problem feel free to mention them in the comments section.