(Created page with '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…') |
|||
| 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". | + | 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. |
== Step2: Create plugin file == | == Step2: Create plugin file == | ||
| − | Inside of your plugin's folder ("myplugin") create plugin.js. | + | Inside of your plugin's folder ("myplugin") create an empty file named plugin.js. |
| − | == Step3: Add plugin | + | == Step3: Add plugin definition == |
| + | Plugins are registered with [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.html#.addPlugin CKFinder.addPlugin] function. | ||
| + | |||
| + | <source> | ||
| + | CKFinder.addPlugin( 'myplugin', function( api ) { | ||
| + | var toolId = api.addToolPanel( '<h3>My tool</h3><p>Sample content.</p>' ); | ||
| + | api.showTool( toolId ); | ||
| + | } ); | ||
| + | </source> | ||
| + | |||
| + | 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. | ||
| + | |||
| + | == Step4: Enable plugin == | ||
| + | |||
| + | To enable a plugin, use the [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.config.html#.extraPlugins extraPlugins] configuration option in '''config.js''': | ||
| + | |||
| + | <source> | ||
| + | CKFinder.customConfig = function( config ) | ||
| + | { | ||
| + | config.extraPlugins = 'myplugin'; | ||
| + | }; | ||
| + | </source> | ||
{{#CUSTOMTITLE:Writing JavaScript Plugins}} | {{#CUSTOMTITLE:Writing JavaScript Plugins}} | ||
Revision as of 19:23, 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.
Contents
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.
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 );
} );
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';
};