CKFinder 2.x/Developers Guide/PHP/Plugins/Writing JavaScript - Revision history

Wiktor: Replaced content with '{{Writing_JavaScript_Plugins}}'

2010-05-18T10:45:55Z

Replaced content with '{{Writing_JavaScript_Plugins}}'

Wiktor at 18:36, 17 May 2010

2010-05-17T18:36:57Z

Wiktor at 18:21, 17 May 2010

2010-05-17T18:21:37Z

Wiktor at 18:16, 17 May 2010

2010-05-17T18:16:56Z

Wiktor at 17:54, 17 May 2010

2010-05-17T17:54:07Z

Wiktor at 17:50, 17 May 2010

2010-05-17T17:50:17Z

Wiktor at 17:24, 17 May 2010

2010-05-17T17:24:34Z

Wiktor at 17:23, 17 May 2010

2010-05-17T17:23:22Z

Wiktor: 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…'

2010-05-17T16:38:30Z

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…'

New page

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".

== Step2: Create plugin file ==

Inside of your plugin's folder ("myplugin") create plugin.js.

== Step3: Add plugin dafinition ==

{{#CUSTOMTITLE:Writing JavaScript Plugins}}

← Older revision		Revision as of 10:45, 18 May 2010
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_JavaScript_Plugins}}
−
−	~~== 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 [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>~~
−
−	~~(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.
−
−	~~==== 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>~~
−
−	~~== Creating a plugin - the shorter way ==~~
−
−	Sometimes (usually when developing a new plugin) it is more suitable to have the plugin definition in a single place, where we create CKFinder, instead of having it in a separate file (for example to avoid having to clear browser's cache).
−
−	~~==== 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.~~
−
−	~~== Localizing a plugin ==~~
−
−	~~In the example above, we have hardcoded some strings (e.g. "Enter a number") that ideally should be moved to a separate file to allow translating it into other languages.~~
−
−	~~==== Specify available languages ====~~
−
−	~~Suppose we want to translate our plugin into English, French and Spanish. To list all available languages, we'll use the <code>lang</code> property.~~
−
−	~~<source>~~
−	~~CKFinder.addPlugin( 'pluginname', {~~
−	~~// Available languages~~
−	~~lang : [ 'en', 'es', 'fr' ],~~
−
−	~~// Plugin definition~~
−	~~appReady : function( api ) {~~
−	~~// ...~~
−	~~api.openMsgDialog( api.lang.pluginname.translationKey );~~
−	}
−
−	~~});~~
−	~~</source>~~
−
−	~~==== Replace hardcoded strings with variables ====~~
−
−	~~Replace each hardcoded string with api.lang.[your plugin name].[translation key]~~
−
−	~~==== Create a file for each language ====~~
−
−	~~Create a "lang" subfolder inside of a plugins folder and create there three files: en.js, es.js and fr.js.~~
−	~~In each file paste the following:~~
−
−	~~<source>~~
−	~~// setPluginLang( [Plugin name], [Language code], [Translations] );~~
−	~~CKFinder.setPluginLang( 'pluginname', 'en',~~
−	{
−	~~pluginname :~~
−	{
−	~~translationKey : 'Application is now ready to use',~~
−	~~anotherKey : 'Another message'~~
−	~~// ...~~
−	}
−	~~});~~
−	~~</source>~~
−	~~After creating such file, we can use <code>api.lang.pluginname.translationKey</code> in the plugin definition instead of "Application is now ready to use".~~
−
−	~~See the dummy plugin (plugins/dummy) distributed with CKFinder for an example.~~
−
−	~~== 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~~}}

@@ Line 11: / Line 11: @@
 ==== 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 ====

@@ Line 106: / Line 106: @@
 	});
 </source>
 See the dummy plugin (plugins/dummy) distributed with CKFinder for an example.

@@ Line 5: / Line 5: @@
 You can create your own plugin in a four simple steps.
-=== 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.
-=== Step2: Create plugin file ===
+==== Step2: Create plugin file ====
 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.
@@ Line 28: / Line 28: @@
 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''':
@@ Line 41: / Line 41: @@
 == 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 single place, where we create CKFinder, instead of having it in a separate file (for example to avoid having to clear browser's cache).
-=== Example ===
+==== Example ====
 <source>
 CKFinder.addPlugin( 'myplugin', function( api ) {
@@ Line 62: / Line 62: @@
 See the public API sample (_samples/public_api.html) for an example of such approach.
 == Useful resources ==

@@ 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.
 === Step1: Create plugin folder ===
@@ Line 35: / Line 39: @@
 </source>
-== A Shorter Way ==
+== 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.

@@ Line 3: / Line 3: @@
 == 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 ==
-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 dafinition ==
+== Step3: Add plugin definition ==
 {{#CUSTOMTITLE:Writing JavaScript Plugins}}