Writing JavaScript Plugins

This website contains links to software which is either no longer maintained or will be supported only until the end of 2019 (CKFinder 2). For the latest documentation about current CKSource projects, including software like CKEditor 4/CKEditor 5, CKFinder 3, Cloud Services, Letters, Accessibility Checker, please visit the new documentation website.

If you look for an information about very old versions of CKEditor, FCKeditor and CKFinder check also the CKEditor forum, which was closed in 2015. If not, please head to StackOverflow for support.

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