| 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. | ||
| − | == 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 new 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 === |
Inside of your plugin's folder ("myplugin") create an empty file named plugin.js. | Inside of your plugin's folder ("myplugin") create an empty file named plugin.js. | ||
| − | == Step3: Add plugin definition == | + | === Step3: Add plugin definition === |
Plugins are registered with [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.html#.addPlugin CKFinder.addPlugin] function. | Plugins are registered with [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.html#.addPlugin CKFinder.addPlugin] function. | ||
| Line 24: | Line 24: | ||
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. | ||
| − | == Step4: Enable plugin == | + | === 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''': | 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''': | ||
| Line 34: | Line 34: | ||
}; | }; | ||
</source> | </source> | ||
| + | |||
| + | == 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 === | ||
| + | <source> | ||
| + | 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(); | ||
| + | </source> | ||
| + | |||
| + | See the public API sample (_samples/public_api.html) for an example of such approach. | ||
| + | |||
| + | == Useful resources == | ||
| + | |||
| + | * [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinderAPI.html#addFileContextMenuOption Adding file context menu item] | ||
| + | * [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinderAPI.html#addFolderContextMenuOption Adding folder context menu item] | ||
| + | * [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinderAPI.html#getSelectedFile Getting selected file] | ||
| + | * [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinderAPI.html#getSelectedFolder Getting selected folder] | ||
| + | * [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.dataTypes.Connector.html#sendCommand Calling the server connector] | ||
| + | * [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinder.dialog.html#.add Creating a dialog] | ||
| + | * [http://docs.cksource.com/ckfinder_2.x_api/symbols/CKFinderAPI.html#addToolPanel Adding tool box] (on the left side of the application) | ||
| + | * [http://docs.cksource.com/ckfinder_2.x_api/ Full API documentation] | ||
{{#CUSTOMTITLE:Writing JavaScript Plugins}} | {{#CUSTOMTITLE:Writing JavaScript Plugins}} | ||
Revision as of 19:50, 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 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