In this tutorial we are going to integrate responsive file manager in ckeditor in laravel. 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 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 Integrate CK-Editor in Laravel – Laravel CK-Editor Tutorial.
Lets get started :-
What we are going to do ?
- Download responsive file manager from their official website.
- 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. Your folder structure of ckeditor would look like the image below.
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 index.blade.php this is the last code we will see at the end of index.blade.
|
1 2 3 4 5 6 |
<script> var ckview = document.getElementById("ckview"); CKEDITOR.replace(ckview,{ language:'en-gb' }); </script> |
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.
|
1 2 3 4 5 6 7 8 9 |
<script> var ckview = document.getElementById("ckview"); CKEDITOR.replace(ckview,{ language:'en-gb', filebrowserBrowseUrl : '{{url("ckeditor")}}/filemanager/dialog.php?type=2&editor=ckeditor&fldr=', filebrowserUploadUrl : '{{url("ckeditor")}}/filemanager/dialog.php?type=2&editor=ckeditor&fldr=', filebrowserImageBrowseUrl : '{{url("ckeditor")}}/filemanager/dialog.php?type=1&editor=ckeditor&fldr=' }); </script> |
Step 3:-
Now, its time to set the image path for editor. Open config.php file inside public/ckeditor/config/ and go to line 76.
Change the code of line number 76 with the code below :-
|
1 2 3 4 5 6 7 8 9 10 11 |
*/ 'upload_dir' => getenv('APP_ROOT_PATH').'/public/ckeditor/source/', /* |-------------------------------------------------------------------------- | relative path from filemanager folder to upload folder |-------------------------------------------------------------------------- | | with final / | */ '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.
How can i add responsive filemanager if load ckeditor via cdn link, not on local server.
If you are not using package and directly a cdn link. Then you can just add their id and some codes in script. However this tutorial doesnot covers for cdn. But you can find it in their docs. You can contact me if you have trouble integrating via cdn. Please contact through my contact form.