# CKFinder file manager

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

The CKFinder feature lets you insert images and links to files into your content. CKFinder is a powerful file manager with various image editing and image upload options.

> **Unlock this feature with selected CKEditor Plans**
>
> Try all premium features – no credit card needed.
>
> [Sign up for a free trial ](https://portal.ckeditor.com/checkout?plan=free)[Select a Plan](https://ckeditor.com/pricing/)

<a id="demos">

## Demos

<a id="image-upload-only">

### Image upload only

This demo shows the integration where the file manager’s server connector handles [image upload](#configuring-the-image-upload-only) only:

* Paste an image directly into the editor. It will be automatically uploaded using the server-side connector.
* Use the insert image button in the toolbar to insert an image.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

<a id="full-integration">

### Full integration

This demo shows the [full integration](#configuring-the-full-integration) with the CKFinder file uploader:

* Paste an image directly into the editor. It will be automatically uploaded using the server-side connector.
* Use the insert image or file button in the toolbar to open the CKFinder file manager. Then insert an image or a link to any other file.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

> **Note**
>
> These demos present a limited set of features. Visit the [feature-rich editor example](../../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="additional-feature-information">

## Additional feature information

The CKFinder integration feature is a bridge between the CKEditor 5 WYSIWYG editor and the [CKFinder](https://ckeditor.com/ckfinder) file manager and uploader. CKFinder is a commercial application designed with CKEditor compatibility in mind. It is available as version 3.x for PHP, ASP.NET, and Java and version 2.x for ASP and ColdFusion.

You can use this feature in the rich-text editor in two different ways:

* [**As a server-side connector only**](#configuring-the-image-upload-only) ([demo](#image-upload-only)). In this scenario, images dropped or pasted into the editor are uploaded to the CKFinder server-side connector running on your server.

* [**As a server and client-side file manager integration**](#configuring-the-full-integration) ([demo](#full-integration)). Images dropped or pasted directly into the editor are uploaded to the server (just like in the first option).

  There are more cool features available, for instance:

  * **Uploading** using the full user interface.
  * Uploading **multiple files** at once.
  * **Browsing** previously uploaded images.
  * **Editing** images (cropping, resizing, etc.).
  * **Organizing** or deleting images.

  Check out the [CKFinder file manager website](https://ckeditor.com/ckfinder/) to learn more about the features you can use in your project.

<a id="installation">

## Installation

After [installing the editor](../../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list and toolbar configuration:

<a id="from-npm">

### From npm

```js
import { ClassicEditor, CKFinder, CKFinderUploadAdapter } from 'ckeditor5';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ CKFinder, CKFinderUploadAdapter, /* ... */ ],
		toolbar: [ 'ckfinder', 'uploadImage', /* ... */ ], // Depending on your preference.
		ckfinder: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="from-cdn">

### From CDN

> **Note**
>
> The `ckfinder.js` script exposes a global variable named `window.CKFinder`. Use an alias for the `CKFinder` import to avoid naming conflicts.

```js
const { ClassicEditor, CKFinder: CKFinderPlugin, CKFinderUploadAdapter } = CKEDITOR;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ CKFinderPlugin, CKFinderUploadAdapter, /* ... */ ],
		toolbar: [ 'ckfinder', 'uploadImage', /* ... */ ], // Depending on your preference.
		ckfinder: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="configuration">

## Configuration

The feature is configurable by using the [`config.ckfinder`](../../api/module_ckfinder_ckfinderconfig-CKFinderConfig.md) object.

<a id="configuring-the-image-upload-only">

### Configuring the image upload only

This feature can upload images automatically to the server (for example, when the user drops an image into the content) thanks to the [CKFinder upload adapter](../../api/module_adapter-ckfinder_uploadadapter-CKFinderUploadAdapter.md). All it requires is the correct [`config.ckfinder.uploadUrl`](../../api/module_ckfinder_ckfinderconfig-CKFinderConfig.md#member-uploadUrl) path.

Assuming that you [installed the CKFinder PHP server-side connector](https://ckeditor.com/docs/ckfinder/ckfinder3-php/quickstart.html#quickstart_installation_folders) (and it is available under `https://example.com/ckfinder/`), use the following [quick upload](https://ckeditor.com/docs/ckfinder/ckfinder3-php/commands.html#command_quick_upload) command URL to enable the image upload:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		ckfinder: {
			// Upload the images to the server using the CKFinder QuickUpload command.
			uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json'
			}
		} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

See the **[demo of the image upload only](#image-upload-only)**.

<a id="configuring-the-full-integration">

### Configuring the full integration

To use both the image upload functionality and the file manager user interface in your application, you must first load the CKFinder JavaScript library. Then enable the CKFinder integration in your rich-text editor instance.

The easiest way to load the CKFinder library is to include the `<script>` tag loading the `ckfinder.js` file first:

```html
<script src="https://example.com/ckfinder/ckfinder.js"></script>
```

Then:

* Make sure that the [CKFinder plugin](../../api/module_ckfinder_ckfinder-CKFinder.md) for CKEditor 5 is enabled. See the [Installation](#installation) section.

* To enable the automatic file upload to the server when an image is pasted or dropped into the editor content, set the correct [`config.ckfinder.uploadUrl`](../../api/module_ckfinder_ckfinderconfig-CKFinderConfig.md#member-uploadUrl) path.

* To display the toolbar button that opens the CKFinder file manager UI allowing the users to choose the files on the server, make sure that `'ckfinder'` is present in your [`config.toolbar`](../../api/module_core_editor_editorconfig-EditorConfig.md#member-toolbar).

* Additionally, you can use [`config.ckfinder.options`](../../api/module_ckfinder_ckfinderconfig-CKFinderConfig.md#member-options) to define [CKFinder’s options](https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Config). For example:

  * You can define [`options.resourceType`](https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-resourceType) to tell CKFinder the specified resource type can be browsed when the user clicks the button.
  * You can define [`options.language`](https://ckeditor.com/docs/ckfinder/ckfinder3/#!/api/CKFinder.Config-cfg-language) to set the UI language of CKFinder. By default, it will be set to the UI language of the editor.

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		ckfinder: {
			// Upload the images to the server using the CKFinder QuickUpload command.
			uploadUrl: 'https://example.com/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json',

			// Define the CKFinder configuration (if necessary).
			options: {
				resourceType: 'Images'
			}
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

See the **[demo of the full integration](#full-integration)**.

<a id="configuring-the-opener">

#### Configuring the opener

You can change the way CKFinder opens using the [`config.ckfinder.openerMethod`](../../api/module_ckfinder_ckfinderconfig-CKFinderConfig.md#member-openerMethod) option.

By default, the file manager opens as a modal. To open it in a new pop-up window, set the configuration value to `popup`:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		ckfinder: {
			// Open the file manager in the pop-up window.
			openerMethod: 'popup'
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="configuring-allowed-file-types">

### Configuring allowed file types

You should configure the allowed file types that can be uploaded in two places:

* On the client side, in CKEditor 5, restricting image upload through the CKEditor 5 UI and commands
* On the server side, in CKFinder, restricting the file formats accepted in CKFinder

<a id="client-side-configuration">

#### Client-side configuration

Use the [`image.upload.types`](../../api/module_image_imageconfig-ImageUploadConfig.md#member-types) configuration option to define the allowed image MIME types that the users can upload to CKEditor 5.

By default, users can upload `jpeg`, `png`, `gif`, `bmp`, `webp`, and `tiff` files, but you can customize this behavior to accept, for example, SVG files.

<a id="server-side-configuration">

#### Server-side configuration

Use the `allowedExtensions` configuration option to define the file extension allowed to be uploaded with CKFinder for a particular resource type. Refer to the [relevant server-side connector documentation](../../../../ckfinder/latest/index.md) to learn more.

<a id="common-api">

## Common API

The [`CKFinder`](../../api/module_ckfinder_ckfinder-CKFinder.md) plugin registers:

* The `'ckfinder'` UI button component.

* The `'ckfinder'` command implemented by the [`CKFinderCommand`](../../api/module_ckfinder_ckfindercommand-CKFinderCommand.md).

  You can open CKFinder by executing the following code:

  ```js
  editor.execute( 'ckfinder' );
  ```

Additionally, in the “image upload only” integration, you can use the following button and command registered by the [`ImageUpload`](../../api/module_image_imageupload-ImageUpload.md) plugin:

* The `'uploadImage'` UI button component.
* The `'uploadImage'` command implemented by the [`UploadImageCommand`](../../api/module_image_imageupload_uploadimagecommand-UploadImageCommand.md).

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../../framework/development-tools/inspector.md) for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

<a id="whats-next">

## What’s next

Check out the comprehensive [Image upload overview](../images/image-upload/image-upload.md) to learn more about different ways of uploading images in CKEditor 5.

See the [image feature guide](../images/images-overview.md) to find out more about handling images in CKEditor 5.

<a id="contribute">

## Contribute

The source code of the feature is available on GitHub at <https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-ckfinder>.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../../llms.txt)