CKFinder.Config

Enables file selection menu and toolbar items.

config.chooseFiles = true;

Defaults to: false

Automatically closes CKFinder popup on file selection. If set to false you must close CKFinder popup manually by running request 'closePopup'.

Defaults to: true

Enables file selection with double click. This option works when CKFinder is integrated with CKEditor or when chooseFiles is set to true .

config.chooseFilesOnDblClick = false;

Defaults to: true

The size of icon in compact view. Available sizes are:

• 16
• 22
• 32
• 48

Defaults to: 22

Available since: 3.4

Config file location relative to basePath (CKFinder location). Can be also set to an absolute URL.
Note: this option can be only set inline when creating a CKFinder instance.

CKFinder.widget( 'ckfinder-widget', {
    configPath: '/path/to/my-config.js'
} );

For maximum performance, it is possible to instruct CKFinder to skip loading configuration completely by passing inline configuration option set to an empty string when creating CKFinder:

CKFinder.widget( 'ckfinder-widget', {
    configPath: '',
    // Set other required configuration options inline.
    language: 'de'
} );

You can also add parameters to config.js to enforce browser to require new version of this file without using cache.

CKFinder.widget( 'ckfinder-widget', {
    // Old setting was configPath: 'config.js?timestamp=20160101'
    configPath: 'config.js?timestamp=20160808'
} );

Defaults to: 'config.js'

Additional (GET) parameters to send to the server with each request. The value of this configuration is appended to the query string of each server request.

config.connectorInfo = 'token=7901a26e4bc422aef54eb45';

See also pass

Defaults to: ''

Server connector language.

Do not change this option unless you write your own server connector for CKFinder.

Defaults to: 'php'

Path to the server connector. The default value is different between various server side version of CKFinder.

config.connectorPath = '/path/to/custom/server/connector.php';

Defaults to: ''

Path to CKFinder's structure CSS file. This file contains CSS for widgets like file thumbnails or folders tree.

config.coreCSS = 'some/path/ckfinder.css';

Defaults to: 'skins/core/ckfinder.css'

Whether to display the modification time in the files pane.

config.defaultDisplayDate = false;

Note: this setting sets the default value which will be used during the first launch of CKFinder. In order to test it you might need to clear cookies (local storage) or check it in Incognito mode. CKFinder automatically remembers user settings and uses them instead of default values on consecutive visits.

Defaults to: true

Whether to display file names in the files pane.

config.defaultDisplayFileName = false;

Note: this setting sets the default value which will be used during the first launch of CKFinder. In order to test it you might need to clear cookies (local storage) or check it in Incognito mode. CKFinder automatically remembers user settings and uses them instead of default values on consecutive visits.

Defaults to: true

Whether to display the size of a file in the files pane.

config.defaultDisplayFileSize = false;

Note: this setting sets the default value which will be used during the first launch of CKFinder. In order to test it you might need to clear cookies (local storage) or check it in Incognito mode. CKFinder automatically remembers user settings and uses them instead of default values on consecutive visits.

Defaults to: true

The language to be used if language is left empty and it's not possible to localize the application to the user language.

config.defaultLanguage = 'it';

Defaults to: 'en'

The default sort by option.

Available sort options:

• 'name' - Files will be sorted by filename.
• 'size' - Files will be sorted by size.

• 'date' - Files will be sorted by date.

  config.defaultSortBy = 'size';

Note: this setting sets the default value which will be used during the first launch of CKFinder. In order to test it you might need to clear cookies (local storage) or check it in Incognito mode. CKFinder automatically remembers user settings and uses them instead of default values on consecutive visits.

Defaults to: 'name'

Available since: 3.2

The default sort order option.

Available sort options:

• 'asc' - Files will be sorted ascending.

• 'desc' - Files will be sorted descending.

  config.defaultSortByOrder = 'desc';

Note: this setting sets the default value which will be used during the first launch of CKFinder. In order to test it you might need to clear cookies (local storage) or check it in Incognito mode. CKFinder automatically remembers user settings and uses them instead of default values on consecutive visits.

Defaults to: 'asc'

Available since: 3.2

The default files pane view.

Available view types:

• 'thumbnails' - The "thumbnails" mode will display each file as a "box". For images, a small preview of it (called thumbnail) will be displayed inside the box. For other files, an icon will be available instead.
• 'list' - The "list" mode will display all files as a list, one bellow the other. No image previews are available in this mode.

• 'compact' - The "compact" mode will display all files in a columns. No image previews are available in this mode.

  config.defaultViewType = 'list';

Note: this setting sets the default value which will be used during the first launch of CKFinder. In order to test it you might need to clear cookies (local storage) or check it in Incognito mode. CKFinder automatically remembers user settings and uses them instead of default values on consecutive visits.

Defaults to: 'thumbnails'

Available since: 3.2

Controls automatic focus for dialogs. If set to 'true' then dialog will focus first found form element - input, select or textarea. If focusItem is string then it is used as jQuery selector used to find elements to focus.

config.dialogFocusItem: '.my-class'

Defaults to: true

Controls minimal height of dialog contents pane (excluding title bar and buttons).

config.dialogMinHeight: '400px'

Defaults to: '4em'

Controls minimal width of dialog contents pane.

config.dialogMinWidth: '600px'

Defaults to: '18em'

Defines an overlay swatch setting for jQuery mobile widget when building dialog. If set to false the overlay will not have a swatch setting applied. If set to true, the current config.swatch will be applied. The "moono" skin forces true for this setting.

CKFinder.start( {
    skin: 'jquery-mobile',
    dialogOverlaySwatch: 'b'
} );

CKFinder.start( {
    skin: 'jquery-mobile',
    swatch: 'c',
    dialogOverlaySwatch: true // will apply 'c' swatch
} );

Defaults to: false

Changes folders display mode. When set to true folders are displayed as a tree in primary panel when set to false folders are displayed inline with files, there is no folders tree and breadcrumbs are displayed.

Defaults to: true

Adjustment sliders available in the image editing interface. The names of sliders are taken from CamanJS built-in filters. The full list of sliders:

config.editImageAdjustments = [
    'brightness', 'clip', 'contrast', 'exposure', 'gamma', 'hue', 'noise', 'saturation', 'sepia',
    'sharpen', 'stackBlur', 'vibrance'
];

Defaults to: ['brightness', 'contrast', 'exposure', 'saturation', 'sepia', 'sharpen']

Presets available in the image editing interface. The names of presets are taken from CamanJS presets example. The full list of presets:

config.editImagePresets = [
    'clarity', 'concentrate', 'crossProcess', 'glowingSun', 'grungy', 'hazyDays', 'hemingway', 'herMajesty',
    'jarques', 'lomo', 'love', 'nostalgia', 'oldBoot', 'orangePeel', 'pinhole', 'sinCity', 'sunrise', 'vintage'
];

Defaults to: ['clarity', 'herMajesty', 'nostalgia', 'pinhole', 'sunrise', 'vintage']

Map of file extension to file icon name. File icons are loaded from folder defined in config.fileIconsPath. Required icons are 'default' - and icon displayed for all files if icon for file type cannot be found and 'folder' used for folders in config.displayFoldersPanel set to false.

// Use only file icons for pdf.
config.fileIcons: {
    'default': 'unknown.png',
    'folder': 'directory.png',
    'pdf': 'pdf.png'
}

Defaults to: {'default': 'unknown.png', folder: 'directory.png', '7z': '7z.png', accdb: 'access.png', avi: 'video.png', bmp: 'image.png', css: 'css.png', csv: 'csv.png', doc: 'msword.png', docx: 'msword.png', flac: 'audio.png', gif: 'image.png', gz: 'tar.png', htm: 'html.png', html: 'html.png', jpeg: 'image.png', jpg: 'image.png', js: 'javascript.png', log: 'log.png', mp3: 'audio.png', mp4: 'video.png', odg: 'draw.png', odp: 'impress.png', ods: 'calc.png', odt: 'writer.png', ogg: 'audio.png', opus: 'audio.png', pdf: 'pdf.png', php: 'php.png', png: 'image.png', ppt: 'powerpoint.png', pptx: 'powerpoint.png', rar: 'rar.png', README: 'readme.png', rtf: 'rtf.png', sql: 'sql.png', tar: 'tar.png', tiff: 'image.png', txt: 'plain.png', wav: 'audio.png', weba: 'audio.png', webm: 'video.png', xls: 'excel.png', xlsx: 'excel.png', zip: 'zip.png'}

Path to root folder that contains file icons. Icons are stored in subfolders named after file icon sizes defined in fileIconsSizes.

config.fileIconSizes = '128,32';
config.fileIconsPath = 'my/path/';
// Server must contain paths: 'my/path/128/' and 'my/path/32'.

Defaults to: 'skins/core/file-icons/'

Available icon sizes in fileIconsPath available when rendering file thumbnails. Define sizes in descending order as coma-separated values. When changing available icon size check thumbnail settings thumbnailDefaultSize, thumbnailMinSize and thumbnailMaxSize. File icons are not scaled up when changing thumbnail size.

// Use fewer icon sizes
config.fileIconSizes = '256,64,32';

Defaults to: '256,128,64,48,32,22,16'

The height of CKFinder application, in relative or absolute, e.g. 30px, 5em. Note: Percentage unit is not supported yet. e.g. 30%.

config.height = 500;
config.height = '25em';
config.height = '300px';

Defaults to: 400

Path to additional icons. Usually provided by custom skin. Icons classes must be compatible with jQuery mobile.

Defaults to: ''

The id of CKFinder instance. An optional setting used to distinguish various CKFinder instances. Instances with the same id will share the same user runtime settings across web application.

If id is not set, then all CKFinder instances within the same domain will share user settings (e.g. the last opened folder, whether to display file size/name, the preferred size of thumbnails).

 CKFinder.start( { id: 'myCKFinderNo1' } );

If id should be passed to the server connector with each request it needs to be added in pass option. Unlike in CKFinder 2.x, this isn't done automatically.

 CKFinder.start( { id: 'myCKFinderNo1', pass: 'id' } );

Defaults to: ''

Pass path to jquery. Useful to load jquery from CDN.

config.jquery = '//code.jquery.com/jquery-2.1.0.js';

Defaults to: 'libs/jquery.js'

Pass path to jquery mobile. Useful to load jquery mobile from CDN.

config.jqueryMobile = '//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js';

Defaults to: 'libs/jquery.mobile.js'

Path to jQuery mobile icons CSS file. CKFinder don't use jQuery mobile icons, so set this if you want to use icons from jQuery mobile. Useful to load jquery mobile CSS files from CDN.

config.jqueryMobileIconsCSS = '//code.jquery.com/mobile/1.4.5/jquery.mobile.icons-1.4.5.min.css';

Defaults to: ''

Path to jQuery mobile structure CSS file. Useful to load jquery mobile CSS files from CDN.

config.jqueryMobileStructureCSS = '//code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css';

Defaults to: 'libs/jquery.mobile.structure.css'

The user interface language localization to use. If empty, CKFinder automatically localize the application to the user language, if supported, otherwise the defaultLanguage language is used.

// Load the Polish interface.
config.language = 'pl';

Defaults to: ''

Map of available language files used to determine supported language when detecting browser language. Also allows to add own language file. Name of language should be in lower case and compatible with navigator.language.

// Allow only certain languages to be detected
config.languages = { en: 1, pl: 1, fr: 1 };

Defaults to: {'bg': 1, 'bs': 1, 'ca': 1, 'cs': 1, 'cy': 1, 'da': 1, 'de': 1, 'de-ch': 1, 'el': 1, 'en': 1, 'eo': 1, 'es': 1, 'es-mx': 1, 'et': 1, 'eu': 1, 'fa': 1, 'fi': 1, 'fr': 1, 'gu': 1, 'he': 1, 'hi': 1, 'hr': 1, 'hu': 1, 'it': 1, 'ja': 1, 'ko': 1, 'ku': 1, 'lt': 1, 'lv': 1, 'nb': 1, 'nl': 1, 'nn': 1, 'no': 1, 'pl': 1, 'pt-br': 1, 'ro': 1, 'ru': 1, 'sk': 1, 'sl': 1, 'sr': 1, 'sv': 1, 'tr': 1, 'uk': 1, 'vi': 1, 'zh-cn': 1, 'zh-tw': 1}

The size of icon in list view. Available sizes are:

• 16
• 22
• 32
• 48

Defaults to: 22

Available since: 3.2

If configured add an overlay for jQuery mobile loader widget. If set to false the overlay will not be added. If set to true, the current config.swatch will be applied. The "moono" skin forces true for this setting.

CKFinder.start( {
    skin: 'jquery-mobile',
    loaderOverlaySwatch: 'b'
} );

CKFinder.start( {
    skin: 'jquery-mobile',
    swatch: 'c',
    loaderOverlaySwatch: true // will apply 'c' swatch
} );

Defaults to: false

Callback function to be executed when CKFinder is initialized. Callback function receives CKFinder.Application instance object.

CKFinder.popup( {
    onInit: function( finder ) {
        console.log( 'Now I have CKFinder instance!' );
    }
} );

Parameters

• finder : CKFinder.Application

Coma separated list of parameters that will be additionally passed to the server connector with each request.

Passing additional data on each request might be really useful together with a custom logic on the server side. E.g. a unique token may be used to set different server side paths for uploaded files, depending on the context where CKFinder is used.

config.pass = 'token';
// Set the actual value to be passed
config.token = '7901a26e4bc422aef54eb45';

Example ajax request performed by CKFinder with configuration above:

http://example.com/ckfinder/connector.php?command=GetFiles&currentFolder=%2F&langCode=en&token=7901a26e4bc422aef54eb45
                                                                                        ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

This option duplicates in some sense config.connectorInfo, however it allows for even more (see below).

It's possible to set arguments values in a query string when CKFinder is launched using ckfinder.html. This may be particularly useful when manually integrating CKFinder with CKEditor.

// In config.js:
config.pass = 'token';

// Option passed in the query string:
http://example.com/ckfinder.html?token=7901a26e4bc422aef54eb45
                                ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

In the above situation, ajax requests sent by CKFinder to the server connector will also contain token.

Defaults to: ''

List of additional plugins to be loaded. This is a tool for loading optional plugins for CKFinder. It can be either comma separated list of plugins' names or an array. When passing an array it is possible to define plugin location as a relative or absolute directory on CKFinder installation or as a full URI to external resource.

config.plugins = 'MyPlugin';

config.plugins = [
    'MyPlugin',
    'plugins/Plugin/Plugin, // load from path relative to ckfinder.js file
    'http://example.com/ckfinder-plugins/plugin/plugin.js'
];

Defaults to: ''

Controls width of primary panel (left in LTR and right in RTL) width and overrides jQuery mobile panel width CSS settings. Affects all panels on left side of view.

config.primaryPanelWidth = '15em'

Defaults to: ''

If this configuration is set to true, CKFinder will work in read-only mode, so the user will be able to browse the files but will not be able to introduce any changes. Thanks to this setting you will be able to use CKFinder as an online gallery. This settings is really a shortcut for disabling modules by config.removeModules with the list of modules set to CreateFolder,DeleteFile,DeleteFolder,EditImage,FilesMoveCopy,FormUpload,Html5Upload,RenameFile,RenameFolder,UploadFileButton

Note: This will only disable certain UI elements. In order to successfully block file uploads or modifications you will need to adjust ACL settings accordingly in the server side configuration file.

config.readOnly = true;

Defaults to: false

Exclude additional modules when config.readOnly is set to true.

// This will disable also a Maximize module in readOnly mode
config.readOnlyExclude = 'Maximize';

Defaults to: ''

Whether CKFinder should remember the last used folder in local storage and open it automatically next time.

config.rememberLastFolder = false;

Note: In some cases it may be more handy to keep the values of last used folder separately for each CKFinder instance. In such case, assign the id property.

Defaults to: true

List of modules that must not be loaded. This is a tool setting which makes it easier to avoid loading modules that are otherwise automatically loaded by CKFinder. Available modules are:

• Connector* - Sends requests to server connector.
• ContextMenu - Manages context menu display.
• CreateFolder - Adds a Create Folder command.
• DeleteFile - Adds a Delete File command.
• DeleteFolder - Adds a Delete Folder command.
• Dialogs* - Manages dialogs display.
• EditImage - Adds an image editor.
• FileDownload - Adds a file download actions.
• FilePreview - Adds a file preview.
• Files* - Manages files & files pane display.
• FilesMoveCopy - Adds a Files Move and Files Copy commands.
• FilterFiles - Adds a filter files box to toolbar.
• FocusManager - Allows to remember focus.
• Folders* - Manages folders & folders panel display.
• FormUpload - Adds a single file upload for browsers that do not support HTML5 uploads.
• Html5Upload - Adds a multiple files upload.
• KeyListener - Allows to bing to global key listen events.
• Loader - Displays loading messages.
• Maximize - Adds a maximize/minimize button to toolbar.
• Pages* - Manages displaying jQuery mobile pages.
• Panels* - Displays panels.
• RenameFile - Adds a Rename File command.
• RenameFolder - Adds a Rename Folder command.
• Settings - Manages user settings.
• Shortcuts - Manages displaying a dialog with application shortcuts.
• StatusBar - Manages displaying status bar inside pages.
• Toolbars - Manages displaying toolbars inside pages.
• UploadFileButton - Adds an upload file button to toolbar.

Items marked with * are considered as core modules and should not be removed.

// Disable toolbars.
config.removeModules = 'Toolbars';

Defaults to: ''

Controls available options in the context menu / toolbar to "Choose Resized". Possible values:

• true: User can choose all resized images according to folder's IMAGE_RESIZE/IMAGE_RESIZE_CUSTOM ACL permissions.
• false: Disable "Choose Resized" option in context menu / toolbar.

• array: Shows just a subset of predefined allowed sizes, even if custom thumbnails are available.

  config.resizeImages = [ 'small', 'medium' ];

Defaults to: true

Resource type to display. By default CKFinder displays all available resource types. If ResourceType property is set, CKFinder will display only specified resource type.

CKFinder.popup( {
    resourceType: 'Images'
} );

Controls width of secondary panel (right in LTR and left in RTL) width and overrides jQuery mobile panel width CSS settings. Affects all panels on right side of view.

config.secondaryPanelWidth = '20em'

Defaults to: ''

Set skin used by CKFinder. By default CKFinder comes with two skins: "moono" and "jquery-mobile". The "moono" has visual appearance similar to CKEditor "moono" skin. The "jquery-mobile" skin is basic skin that uses default swatches from jQuery mobile. The "jquery-mobile" skin swatch can be also easily changed using ThemeRoller.

// Use "jquery-mobile" theme instead of default "moono"
config.skin = 'jquery-mobile';

// Use you own theme located at network location
config.skin = 'http://www.example.com/skins/my-skin';

Defaults to: 'moono'

Used only when startupPath is set. If set to true, the initial folder will be opened automatically on startup.

config.startupFolderExpanded = false;

Defaults to: true

Resource Type and the name of the startup folder, separated with a colon. If defined, CKFinder will open to the selected given folder and will list it contents.

config.startupPath = "Images:/cars/";

Note: CKFinder remembers the last opened folder, so in order to enforce opening CKFinder always in a specified location set also rememberLastFolder to false.

Defaults to: ''

Sets jQuery-mobile swatch used by CKFinder. The "moono" skins comes with only one swatch "a". The "jquery-mobile" skins has two swatches "a" and "b". Theme might discard swatch setting, for instance "moono" skin will enforce "a" swatch.

config.swatch = 'b';

Defaults to: 'a'

The CKFinder tabindex value used in widget mode.

config.tabIndex = 1;

Defaults to: 0

Path to jquery mobile structure CSS file. Useful to load jquery mobile CSS files from CDN.

config.themeCSS = '//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css';

Defaults to: ''

Additional classes that will be applied on files pane when using thumbnail resizing. When configuring steps 120px as 'small' and 180px as 'medium' CKFinder will add CSS classes to files pane in below manner:

• 'ckf-files-thumbs-small' for thumbs smaller then 120px
• 'ckf-files-thumbs-medium' for thumbs that are between 120px and 180px
• (none class) for thumbs greater then 180px

You can add as many steps as you wish.

Defaults to: {120: 'small', 180: 'medium'}

Defines default thumbnail size for cases when user does not changed thumbnail size.

Defaults to: 150

The number of milliseconds before requesting another thumbnail. If your server have problems with handling many requests in a short time, increase this value.

// disable delay
config.thumbnailDelay = 0;

Defaults to: 50

Defines maximum thumbnail size used for thumbnail resizing. When thumbnailMaxSize is bigger then maximum thumbnail size returned by server then the server maximum thumbnail size will be used.

Defines minimum thumbnail size used for thumbnail resizing.

Defines thumbnail size step used for thumbnail resizing.

Defaults to: 2

An alias for resourceType

A window width threshold between desktop and mobile UI mode, expressed in em units.

config.uiModeThreshold = 38;

Defaults to: 48

The application width in CSS size format or pixel integer.

config.width = 850;
config.width = '75%';

Defaults to: '100%'