Plug-ins"

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.

 
(6 intermediate revisions by the same user not shown)
Line 12: Line 12:
 
The '''fckplugin.js''' file defines your plugin. It should register the command(s) that it implements, and create a toolbar button for each one.
 
The '''fckplugin.js''' file defines your plugin. It should register the command(s) that it implements, and create a toolbar button for each one.
 
<pre>// Register the related commands.
 
<pre>// Register the related commands.
−
FCKCommands.RegisterCommand( 'My_Find' , new FCKDialogCommand( FCKLang['DlgMyFindTitle'] , FCKLang['DlgMyFindTitle'] , FCKConfig.PluginsPath + 'findreplace/find.html' , 340, 170 ) ) ;
+
FCKCommands.RegisterCommand( 'My_Find' , new FCKDialogCommand( FCKLang['DlgMyFindTitle'] , FCKLang['DlgMyFindTitle'] , FCKConfig.PluginsPath + 'findreplace/find.html' , 340, 170 ) )&nbsp;;
−
FCKCommands.RegisterCommand( 'My_Replace' , new FCKDialogCommand( FCKLang['DlgMyReplaceTitle'], FCKLang['DlgMyReplaceTitle'] , FCKConfig.PluginsPath + 'findreplace/replace.html', 340, 200 ) ) ;
+
FCKCommands.RegisterCommand( 'My_Replace' , new FCKDialogCommand( FCKLang['DlgMyReplaceTitle'], FCKLang['DlgMyReplaceTitle'] , FCKConfig.PluginsPath + 'findreplace/replace.html', 340, 200 ) )&nbsp;;
  
 
// Create the "Find" toolbar button.
 
// Create the "Find" toolbar button.
−
var oFindItem = new FCKToolbarButton( 'My_Find', FCKLang['DlgMyFindTitle'] ) ;
+
var oFindItem = new FCKToolbarButton( 'My_Find', FCKLang['DlgMyFindTitle'] )&nbsp;;
−
oFindItem.IconPath = FCKConfig.PluginsPath + 'findreplace/find.gif' ;
+
oFindItem.IconPath = FCKConfig.PluginsPath + 'findreplace/find.gif'&nbsp;;
  
−
FCKToolbarItems.RegisterItem( 'My_Find', oFindItem ) ; // 'My_Find' is the name used in the Toolbar config.
+
FCKToolbarItems.RegisterItem( 'My_Find', oFindItem )&nbsp;; // 'My_Find' is the name used in the Toolbar config.
  
 
// Create the "Replace" toolbar button.
 
// Create the "Replace" toolbar button.
−
var oReplaceItem = new FCKToolbarButton( 'My_Replace', FCKLang['DlgMyReplaceTitle'] ) ;
+
var oReplaceItem = new FCKToolbarButton( 'My_Replace', FCKLang['DlgMyReplaceTitle'] )&nbsp;;
−
oReplaceItem.IconPath = FCKConfig.PluginsPath + 'findreplace/replace.gif' ;
+
oReplaceItem.IconPath = FCKConfig.PluginsPath + 'findreplace/replace.gif'&nbsp;;
  
−
FCKToolbarItems.RegisterItem( 'My_Replace', oReplaceItem ) ; // 'My_Replace' is the name used in the Toolbar config.
+
FCKToolbarItems.RegisterItem( 'My_Replace', oReplaceItem )&nbsp;; // 'My_Replace' is the name used in the Toolbar config.
−
</pre>
+
</pre>  
 +
=== Installing and adding plugin ===
  
−
=== Installing a plugin ===
+
==== Installing ====
  
 
To install a new plugin, copy the unzipped plugin to your editor's plugin directory 'editor/plugins' (e.g. for the placeholder plugin the path to its fckplugin.js file would be 'editor/plugins/placeholder/fckplugin.js'). That's all!
 
To install a new plugin, copy the unzipped plugin to your editor's plugin directory 'editor/plugins' (e.g. for the placeholder plugin the path to its fckplugin.js file would be 'editor/plugins/placeholder/fckplugin.js'). That's all!
  
−
Now to setup the plugin (have it showing up in your editor), follow the next instructions:
+
==== Adding ====
−
 
 
−
==== Establishing the button in the toolbar ====
 
−
 
 
−
You should create a new toolbar in your custom [[FCKeditor 2.x/Developers Guide/Configuration/Configuration File|Configuration File]] to reference the plugin:
 
−
<pre>//custom config.js - My custom Configuration File
 
−
FCKConfig.ToolbarSets['PluginTest'] = [
 
−
['SourceSimple'],
 
−
['My_Find','My_Replace','-','Placeholder'],
 
−
['StyleSimple','FontFormatSimple','FontNameSimple','FontSizeSimple'],
 
−
['Table','-','TableInsertRowAfter','TableDeleteRows','TableInsertColumnAfter','TableDeleteColumns','TableInsertCellAfter','TableDeleteCells','TableMergeCells','TableHorizontalSplitCell','TableCellProp'],
 
−
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink'],
 
−
'/',
 
−
['My_BigStyle','-','Smiley','-','About']
 
−
] ;
 
−
</pre>
 
−
In the given example, 'Placeholder', 'My_Find', 'My_replace' and the table commands are implemented by plugins.
 
−
==== Adding the plugin ====
 
  
 
You can then add the plugin in your custom [[FCKeditor 2.x/Developers Guide/Configuration/Configuration File|Configuration File]]. You can either change the default path, and add it, or use the third paramter to [[FCKeditor 2.x/Developers Guide/Configuration/Configuration Options/Plugins.Add|FCKConfig.Plugins.Add]] to specify the path to the plugin:
 
You can then add the plugin in your custom [[FCKeditor 2.x/Developers Guide/Configuration/Configuration File|Configuration File]]. You can either change the default path, and add it, or use the third paramter to [[FCKeditor 2.x/Developers Guide/Configuration/Configuration Options/Plugins.Add|FCKConfig.Plugins.Add]] to specify the path to the plugin:
−
<pre>
+
<pre>// Change the default plugin path.
−
 
+
FCKConfig.PluginsPath = FCKConfig.BasePath.substr(0, FCKConfig.BasePath.length - 7) + '_samples/_plugins/'&nbsp;;
−
// Change the default plugin path.
 
−
FCKConfig.PluginsPath = FCKConfig.BasePath.substr(0, FCKConfig.BasePath.length - 7) + '_samples/_plugins/' ;
 
  
 
// Add our plugin to the plugins list.
 
// Add our plugin to the plugins list.
−
// FCKConfig.Plugins.Add( pluginName, availableLanguages )
+
// FCKConfig.Plugins.Add( pluginName, availableLanguages )
−
// pluginName: The plugin name. The plugin directory must match this name.
+
// pluginName: The plugin name. The plugin directory must match this name.
−
// availableLanguages: a list of available language files for the plugin (separated by a comma).
+
// availableLanguages: a list of available language files for the plugin (separated by a comma).
−
FCKConfig.Plugins.Add( 'findreplace', 'en,it,fr' ) ;
+
FCKConfig.Plugins.Add( 'findreplace', 'en,it,fr' )&nbsp;;
 
FCKConfig.Plugins.Add( 'samples' )  
 
FCKConfig.Plugins.Add( 'samples' )  
  
 
// If you want to use plugins found on other directories, just use the third parameter.
 
// If you want to use plugins found on other directories, just use the third parameter.
−
var sOtherPluginPath = FCKConfig.BasePath.substr(0, FCKConfig.BasePath.length - 7) + 'editor/plugins/' ;
+
var sOtherPluginPath = FCKConfig.BasePath.substr(0, FCKConfig.BasePath.length - 7) + 'editor/plugins/'&nbsp;;
−
FCKConfig.Plugins.Add( 'placeholder', 'en,it,de,fr', sOtherPluginPath ) ;
+
FCKConfig.Plugins.Add( 'placeholder', 'en,it,de,fr', sOtherPluginPath )&nbsp;;
−
FCKConfig.Plugins.Add( 'tablecommands', null, sOtherPluginPath ) ;
+
FCKConfig.Plugins.Add( 'tablecommands', null, sOtherPluginPath )&nbsp;;
−
FCKConfig.Plugins.Add( 'simplecommands', null, sOtherPluginPath ) ;
+
FCKConfig.Plugins.Add( 'simplecommands', null, sOtherPluginPath )&nbsp;;</pre>
 +
== Plugins Recipes ==
 +
 
 +
Here you can find additional configuration methods which allow you to customize the plugins more properly:
 +
 
 +
* [[FCKeditor 2.x/Developers Guide/Customization/Plug-ins/Buttons|Establishing a button in the toolbar]]
 +
* [[FCKeditor 2.x/Developers Guide/Customization/Plug-ins/Popup|Example on how to access the editor from a popup window]]
 +
* [[FCKeditor 2.x/Developers Guide/Customization/Plug-ins/Context|Example on how to associate a context menu (right click menu) option]]
 +
 
 +
== Additional information ==
 +
 
 +
You can download plugins from [http://sourceforge.net/tracker/?group_id=75348&atid=737639|FCKeditor's Sourceforge Plugins Page]. Instructions sometimes are included with the plugin. Otherwise you can try the common instructions just described.
 +
 
 +
There are a few nice examples on the actual creation of a plugin which include interaction with the editor:
 +
 
 +
* Dialog based (new window opens) http://sourceforge.net/forum/forum.php?thread_id=1268047&amp;forum_id=257180.
 +
* Selection based (select then click the button) http://sourceforge.net/forum/message.php?msg_id=3091867

Latest revision as of 15:07, 17 January 2008

Creating & Installing a Plugin in FCKeditor

Writing a plugin

The directory structure for a plugin must always follow the same pattern. The plugin directory must have the same name as the plugin and it must contain a fckplugin.js file. It may also optionally include a language directory with various localized language definitions for your Users Interface (UI). Each file defines a single language, and the filenames (without .js) are what should be passed to FCKConfig.Plugins.Add. If your command has no UI then you don't need to supply any language files.

For the 'findreplace' plugin the structure would look like this (assuming the default plugin path is editor/plugins/): 

/editor/plugins/findreplace/fckplugin.js
/editor/plugins/findreplace/lang/en.js
/editor/plugins/findreplace/lang/it.js

The fckplugin.js file defines your plugin. It should register the command(s) that it implements, and create a toolbar button for each one. 

// Register the related commands.
FCKCommands.RegisterCommand( 'My_Find' , new FCKDialogCommand( FCKLang['DlgMyFindTitle'] , FCKLang['DlgMyFindTitle'] , FCKConfig.PluginsPath + 'findreplace/find.html' , 340, 170 ) ) ;
FCKCommands.RegisterCommand( 'My_Replace' , new FCKDialogCommand( FCKLang['DlgMyReplaceTitle'], FCKLang['DlgMyReplaceTitle'] , FCKConfig.PluginsPath + 'findreplace/replace.html', 340, 200 ) ) ;

// Create the "Find" toolbar button.
var oFindItem = new FCKToolbarButton( 'My_Find', FCKLang['DlgMyFindTitle'] ) ;
oFindItem.IconPath = FCKConfig.PluginsPath + 'findreplace/find.gif' ;

FCKToolbarItems.RegisterItem( 'My_Find', oFindItem ) ; // 'My_Find' is the name used in the Toolbar config.

// Create the "Replace" toolbar button.
var oReplaceItem = new FCKToolbarButton( 'My_Replace', FCKLang['DlgMyReplaceTitle'] ) ;
oReplaceItem.IconPath = FCKConfig.PluginsPath + 'findreplace/replace.gif' ;

FCKToolbarItems.RegisterItem( 'My_Replace', oReplaceItem ) ; // 'My_Replace' is the name used in the Toolbar config.

Installing and adding plugin

Installing

To install a new plugin, copy the unzipped plugin to your editor's plugin directory 'editor/plugins' (e.g. for the placeholder plugin the path to its fckplugin.js file would be 'editor/plugins/placeholder/fckplugin.js'). That's all!

Adding

You can then add the plugin in your custom Configuration File. You can either change the default path, and add it, or use the third paramter to FCKConfig.Plugins.Add to specify the path to the plugin: 

// Change the default plugin path.
FCKConfig.PluginsPath = FCKConfig.BasePath.substr(0, FCKConfig.BasePath.length - 7) + '_samples/_plugins/' ;

// Add our plugin to the plugins list.
// FCKConfig.Plugins.Add( pluginName, availableLanguages )
// pluginName: The plugin name. The plugin directory must match this name.
// availableLanguages: a list of available language files for the plugin (separated by a comma).
FCKConfig.Plugins.Add( 'findreplace', 'en,it,fr' ) ;
FCKConfig.Plugins.Add( 'samples' ) 

// If you want to use plugins found on other directories, just use the third parameter.
var sOtherPluginPath = FCKConfig.BasePath.substr(0, FCKConfig.BasePath.length - 7) + 'editor/plugins/' ;
FCKConfig.Plugins.Add( 'placeholder', 'en,it,de,fr', sOtherPluginPath ) ;
FCKConfig.Plugins.Add( 'tablecommands', null, sOtherPluginPath ) ;
FCKConfig.Plugins.Add( 'simplecommands', null, sOtherPluginPath ) ;

Plugins Recipes

Here you can find additional configuration methods which allow you to customize the plugins more properly:

Additional information

You can download plugins from Sourceforge Plugins Page. Instructions sometimes are included with the plugin. Otherwise you can try the common instructions just described.

There are a few nice examples on the actual creation of a plugin which include interaction with the editor:

Retrieved from "https://docs-old.ckeditor.com/index.php?title=FCKeditor_2.x/Developers_Guide/Customization/Plug-ins&oldid=1720"
This page was last edited on 17 January 2008, at 15:07.