CKFinder Quick Start Guide
Contents
The aim of this article is to get you up and running with CKFinder 3 in a few minutes.
Note: This documentation is only valid for CKFinder 3, which is currently available for PHP, ASP.NET and Java.
If you want to use another server-side connector version (classic ASP, ColdFusion), please use the proper CKFinder 2 distribution and follow the CKFinder 2 Developers Guide.
Download
Visit the official CKFinder site to download CKFinder.
Installation
To set up CKFinder you must first extract the downloaded CKFinder package into your web directory.
Copy the distribution files to your web server and place them inside the /ckfinder/ folder or any other folder of your choice on your website.
Directory Structure
Let us assume that you would like to run CKFinder on the example.com website:
- Website location on the server is
/home/joe/www/example.com/. - CKFinder was extracted to
/home/joe/www/example.com/ckfinder.
With such setup CKFinder will be available at http://example.com/ckfinder/, which means that:
- CKFinder samples can be instantly accessed by visiting
http://example.com/ckfinder/samples/index.html. - To include
ckfinder.json a website you will need to usehttp://example.com/ckfinder/ckfinder.js(or simply/ckfinder/ckfinder.js).
Running CKFinder Samples
As mentioned in the previous step, CKFinder samples are located in <ckfinder>/samples/index.html. For security reasons, CKFinder is distributed as disabled, which means that it has to be manually enabled in the server-side configuration file first before the samples can be run.
Refer to the server-side documentation for more details:
- CKFinder for PHP — Enabling CKFinder
- CKFinder for ASP.NET — Enabling CKFinder
- CKFinder for Java — Enabling CKFinder
Embedding CKFinder on a Website
After you have successfully run CKFinder samples on your own web server, you are ready to integrate it with your website. There are a couple of ways to do so, refer to articles below for more information:
- Integration with CKEditor 4 – If you intend to integrate CKFinder with CKEditor 4.
- Integration with CKEditor 5 – If you intend to integrate CKFinder with CKEditor 5.
- Using CKFinder as a widget – For embedding CKFinder as a component on a web page.
- Using CKFinder in a popup window.
- Using CKFinder in a modal dialog window.
- Using CKFinder in a manually created popup window.