Widget Mode

Using the widget mode you can embed CKFinder directly on a page, as shown below.

Popup Mode

The popup mode is most suitable for selecting files that are stored on a server.

Click the button below to open the popup and choose any file. After that you will see basic information about the file that was selected, including the URL.

Additionally, CKFinder supports a special file selection mode for images called Choose Resized. The CKFinder connector will automatically create a resized version of the image and return its URL.

Multiple Popups

In some cases you may need more than one popup to handle multiple places that require selecting a file. Below you can find an example that fills each of the inputs with the URL of the selected file.

Modal Mode

The modal mode is similar to popup. The difference is that popups are opened using a separate browser window while in modal mode CKFinder is opened inside a modal container that is appended to current page document.

Multiple Modals

In some cases you may need more than one modal to handle multiple places that require selecting a file. Below you can find an example that fills each of the inputs with the URL of the selected file.

Full Page Mode

The full page mode opens CKFinder using the entire page as the working area.

Click the button below to open CKFinder in full page mode.

Open CKFinder

Integrated with your CKEditor

CKFinder can be instantly integrated into CKEditor. Just click the “Image” or “Link” button in the toolbar and then “Browse Server”:

CKEditor Premium

Lightweight WYSIWYG editor designed to simplify HTML editing. Can be easily integrated withCKFinder.

Moono Skin

Moono is a default skin used in CKFinder that provides visual integration with CKEditor.

Default User Interface

By default folders are displayed in CKFinder in a folder tree panel, like in the example below.

Compact User Interface

It is possible to disable the folders panel and have folders displayed as icons in the main area of the application.

Mobile User Interface

Mobile user interface is enabled automatically when the width of the working area of the application gets below the value defined in the uiModeThreshold configuration option.

Note: This mode works best on mobile devices, as touch and swipe events are not enabled for desktop browsers.

Localization

CKFinder interface is automatically displayed in the user's language (as set in the browser or operating system settings). The language of the CKFinder UI can also be set manually, like it is set below to Brazilian Portuguese.

Read-only Mode

In read-only mode the user can browse the files but cannot introduce any changes. Thanks to this setting you can use CKFinder as an online gallery.

Simple Gallery

With a little bit of imagination it is possible to turn CKFinder into a very simple gallery. Here CKFinder is configured to open a file on double click, run without a toolbar and without the folders panel.

Plugins

The functionality of CKFinder can be easily extended or modified using plugins.

The example below shows the StatusBarInfo plugin that displays basic information about the selected file in the application status bar. You can find more plugin examples in the CKFinder sample plugins repository and create your own plugins following the plugin documentation.

Enhancing HTML forms

With creativity, CKFinder can be used in hundreds of specific cases, like in the following form field:

Your browser is outdated

Unfortunately your browser is too old to handle CKFinder 3. If you are looking for a file manager with support for IE8, check CKFinder 2 which supports older browsers.

CKFinder Version Comparison

 CKFinder 2CKFinder 3
Internet Explorer8+9+
Google ChromeYesYes
FirefoxYesYes
SafariYesYes
OperaYesYes
Mobile BrowsersLimited Support*Yes
ASPYesNo
ASP.NETYesPlanned
ColdFusionYesNo
JavaYesPlanned
PHPYesYes

* CKFinder 2 runs on mobile devices, however unlike CKFinder 3 it does not have responsive UI.

CKFinder 2

CKFinder 2 can be easily integrated in any kind of web page.

Integrated into your website

CKFinder can be easily integrated in any kind of web page (for this public demo, full permissions are available in the "Public Folder" folder only):

Note: this demo features CKFinder 3 which is available for PHP and ASP.NET.

CKFinder 2 is currently the latest version of CKFinder for ASP, ColdFusion and Java.
The ASP/Java/ColdFusion distributions of CKFinder will not be upgraded to version 3, however will still receive patches (including security fixes) until 2019.

Note: CKFinder 2 is currently the latest version of CKFinder for ASP, ColdFusion and Java.

The ASP/Java/ColdFusion distributions of CKFinder will not be upgraded to version 3, however will still receive patches (including security fixes) until 2019.