CKFinder 3 - Sample JavaScript Plugins
This repository contains sample plugins for CKFinder 3 created as examples for the CKFinder documentation.
To learn about writing your own plugins, read the Creating Plugins article in the CKFinder 3 documentation.
Loading Plugins
To run sample plugins:
- Download sample plugins and extract them to the
<ckfinder>/plugins
folder. You can download plugins:
- Using
git
. - By pressing the Download ZIP button.
- Enable selected plugins with the
config.plugins
option.
Example
<script src="/ckfinder/ckfinder.js"></script>
<div id="ckfinder1"></div>
<script>
CKFinder.widget( 'ckfinder1', {
width: 800,
height: 700,
plugins: [
'StatusBarInfo'
]
} );
</script>
Note: In CKFinder 3 it is possible to load plugins from a URL, so you can point your CKFinder to the plugin using fully qualified URL. Due to GitHub protection which sends files as plain/text
, using URLs that point directly to GitHub may not work:
<script src="/ckfinder/ckfinder.js"></script>
<div id="ckfinder1"></div>
<script>
CKFinder.widget( 'ckfinder1', {
width: 800,
height: 700,
plugins: [
'https://raw.githubusercontent.com/ckfinder/ckfinder-docs-samples/master/StatusBarInfo/StatusBarInfo.js'
]
} );
</script>
Plugin List
ACLInfo
Sample plugin that displays folder ACL data in the folders tree panel.
It illustrates how to modify templates used by CKFinder to render various parts of the application.
AlterCommand
A simple plugin that illustrates how to alter commands sent to the server connector.
AlterDialogWindow
Sample plugin that alters the "Rename File" dialog window.
This plugin illustrates how to:
- Alter existing dialog windows by overriding the default templates.
- Read values from input elements in dialog windows.
- Listen to dialog events (e.g. to execute code when the "OK" button is pressed).
- Alter executed command to send additional data to the server-side connector.
CustomButton
Sample plugin that illustrates how to:
- Add a custom icon that can be used by a context menu item or a toolbar button.
- Add a context menu item.
- Add a toolbar button.
CustomColumn
Sample plugin that illustrates how to add a custom column to list view.
CustomDialog
Sample plugin which adds a "Share" button that opens a dialog window.
This plugin illustrates how to:
- Create a complete, custom dialog window.
- Add a button to the toolbar when a file is selected.
- Define your own request handler.
CustomPage
Sample plugin which adds a button that opens a separate page with its own toolbar inside CKFinder.
This plugin illustrates how to:
- Add a button to the "Main" toolbar.
- Create a custom toolbar and add a button to it.
- Create, show and close your own page and render a view (custom HTML) inside.
CustomPanel
Sample plugin which adds a button that opens a secondary panel with a textarea element where the user can add comments to files.
This plugin illustrates how to:
- Create, open and close a custom panel.
- Get a value of an element inside a panel.
- Add a button to the toolbar when a file is selected.
- Define your own request handler.
FolderInfo
Sample plugin which displays folder information in the files pane.
This plugin illustrates how to:
- Localize a plugin by providing language files.
- Render custom HTML content inside the application by providing a custom region and showing a custom view in this region.
ImageInfo
Sample plugin which adds a "Image Info" button that opens a dialog with basic information about an image.
This plugin illustrates how to:
- Add a button to the toolbar when an image file is selected.
- Send a command to the server connector.
SettingsDemo
Plugin that adds all possible types of settings to the Settings Panel. It also illustrates on how to detect mode changes
in CKFinder (mobile
/desktop
).
StatusBarInfo
This plugin illustrates how to show, style and add information to the status bar.
Creating Plugins
To learn about creating plugins visit the CKFinder documentation.
License
Copyright (c) 2015, CKSource Holding sp. z o.o.. All rights reserved. For license details see: LICENSE.md.