| Line 1: | Line 1: | ||
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. | 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. | ||
| + | |||
| + | == Creating a plugin == | ||
| + | |||
| + | You can create your own plugin in a four simple steps. | ||
=== Step1: Create plugin folder === | === Step1: Create plugin folder === | ||
| Line 35: | Line 39: | ||
</source> | </source> | ||
| − | == | + | == Creating a plugin - the 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. | 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. | ||
Revision as of 18:54, 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
Creating a plugin
You can create your own plugin in a four simple steps.
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';
};
Creating a plugin - the 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