CKSource

Writing plugins for CKFinder might be fun when you understand how to create them. Below you'll find a short instruction how to do it.

Step1: Create plugin folder

Create a directory for your plugin inside of the "plugins" directory (by default CKFinder comes with three plugins: dummy, fileeditor, imagreresize). Let's use "myplugin" as the plugin name and use the same name for our new folder.

Step2: Create plugin file

Inside of your plugin's folder ("myplugin") create an empty file named plugin.js.

Step3: Add plugin definition

Plugins are registered with CKFinder.addPlugin function.

CKFinder.addPlugin( 'myplugin', function( api ) {
	var toolId = api.addToolPanel( '<h3>My tool</h3><p>Sample content.</p>' );
	api.showTool( toolId );
} );

(Paste the code above to plugin.js and save the file.)

The plugin definition might be a function (where CKFinderAPI is passed as the first argument) or an object. See addPlugin documentation for more details.

Step4: Enable plugin

To enable a plugin, use the extraPlugins configuration option in config.js:

CKFinder.customConfig = function( config )
{
	config.extraPlugins = 'myplugin';
};

A Shorter Way

Sometimes (usually when developing a new plugin) it is more suitable to have the plugin definition in a place, where we create CKFinder, instead of having it in a separate file.

Example

CKFinder.addPlugin( 'myplugin', function( api ) {
	api.addFileContextMenuOption( { label : 'My plugin', command : "myplugincommand" } , function( api, file )
	{
		api.openInputDialog( "Enter a number: ", "0", function( value ) {
			api.openMsgDialog( "You have entered: " + value );
		} );
	});
});	

var finder = new CKFinder();
finder.basePath = '/ckfinder/';
// Specify extraPlugins here, no need to change config.js
finder.extraPlugins = 'myplugin';
finder.create();

See the public API sample (_samples/public_api.html) for an example of such approach.

Useful resources

• Adding file context menu item
• Adding folder context menu item
• Getting selected file
• Getting selected folder
• Calling the server connector
• Creating a dialog
• Adding tool box (on the left side of the application)
• Full API documentation