CKEditor is the favorite web-based word processor of almost all the web developers. But the issue is, it does not come with an in-built image uploading feature, i.e. CKEditor does not know how to handle image uploads. So today we will assign an assistant who knows how to deal with image uploads and file management.
2) Extract the kcfinder directory in the .zip file to the public directory of your project.
3) Open /public/ckeditor/config.js and add code lines as follows;
If you do not want to let your users browse through previously-uploaded files in the server, you can remove/block-comment the first three lines and keep only the last three lines which actually do the uploading part or else you can add user level controls for each feature as per your requirement. Never let users to see the files in your server. If they change the files, other file links can be broken and it will result in huge mess in your application.
4) Activate KCFinder.
By default KCFinder comes disabled. To change it, go to kcfinder/conf/config.php and under general settings, change the value of ‘disabled’ to false. Now, users can upload and manage files (in our case, the image files) on your web application using CKEditor interface.
Also, you can configure KCFinder to get various tasks done. See what tweaks you can do to KCFinder here.
5) Now try to upload an image file using the image icon (01) in your CKEditor interface.
When you click on image icon (01), you will get above Image Properties window. Go to UPLOAD tab (02). Click Choose File (03) and browse through your PC and select the image you want. Now click on Send it to the Server (04). Now automatically your image will be uploaded to the server and a link will be created to your web page. Click OK and you will see the image on your text area of CKEditor.