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.

Line 3: Line 3:
 
== Step1: Create plugin folder ==
 
== 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 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 ==
 
== Step2: Create plugin file ==
Line 19: Line 19:
 
} );
 
} );
 
</source>
 
</source>
 +
 +
(Paste the code above to plugin.js and save the file.)
  
 
The plugin definition might be a function (where [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinderAPI.html CKFinderAPI] is passed as the first argument) or an object. See [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.html#.addPlugin addPlugin documentation] for more details.
 
The plugin definition might be a function (where [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinderAPI.html CKFinderAPI] is passed as the first argument) or an object. See [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.html#.addPlugin addPlugin documentation] for more details.

Revision as of 19:24, 17 May 2010

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';
};