| Line 3: | Line 3: | ||
=== Writing a plugin === | === 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 | + | 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 [[FCKeditor 2.x/Developers Guide/Configuration/Configuration Options/Plugins.Add|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/'''): | For the 'findreplace' plugin the structure would look like this (assuming the default plugin path is '''editor/plugins/'''): | ||
| Line 9: | Line 9: | ||
/editor/plugins/findreplace/lang/en.js | /editor/plugins/findreplace/lang/en.js | ||
/editor/plugins/findreplace/lang/it.js | /editor/plugins/findreplace/lang/it.js | ||
| − | </pre> | + | </pre> |
| − | |||
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> | + | <pre>/* |
| − | /* | ||
FCKCommands.RegisterCommand(commandName, command) | FCKCommands.RegisterCommand(commandName, command) | ||
| − | + | commandName - Command name, referenced by the Toolbar, etc... | |
| − | + | command - Command object (must provide an Execute() function). | |
*/ | */ | ||
// Register the related commands. | // Register the related commands. | ||
FCKCommands.RegisterCommand( | FCKCommands.RegisterCommand( | ||
| − | + | 'My_Find', | |
| − | + | new FCKDialogCommand( | |
| − | + | FCKLang['DlgMyFindTitle'], | |
| − | + | FCKLang['DlgMyFindTitle'], | |
| − | + | FCKPlugins.Items['findreplace'].Path + 'find.html', 340, 170)); | |
FCKCommands.RegisterCommand('My_Replace', | FCKCommands.RegisterCommand('My_Replace', | ||
| − | + | new FCKDialogCommand( | |
| − | + | FCKLang['DlgMyReplaceTitle'], | |
| − | + | FCKLang['DlgMyReplaceTitle'], | |
| − | + | FCKPlugins.Items['findreplace'].Path + 'replace.html', 340, 200)) ; | |
// 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']); | ||
| − | oFindItem.IconPath = FCKPlugins.Items['findreplace'].Path + 'find.gif' ; | + | oFindItem.IconPath = FCKPlugins.Items['findreplace'].Path + 'find.gif' ; |
// 'My_Find' is the name used in the Toolbar config. | // 'My_Find' is the name used in the Toolbar config. | ||
| − | FCKToolbarItems.RegisterItem( 'My_Find', oFindItem ) ; | + | FCKToolbarItems.RegisterItem( 'My_Find', oFindItem ) ; |
// 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']); | ||
Revision as of 10:58, 17 January 2008
Contents
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.
/*
FCKCommands.RegisterCommand(commandName, command)
commandName - Command name, referenced by the Toolbar, etc...
command - Command object (must provide an Execute() function).
*/
// Register the related commands.
FCKCommands.RegisterCommand(
'My_Find',
new FCKDialogCommand(
FCKLang['DlgMyFindTitle'],
FCKLang['DlgMyFindTitle'],
FCKPlugins.Items['findreplace'].Path + 'find.html', 340, 170));
FCKCommands.RegisterCommand('My_Replace',
new FCKDialogCommand(
FCKLang['DlgMyReplaceTitle'],
FCKLang['DlgMyReplaceTitle'],
FCKPlugins.Items['findreplace'].Path + 'replace.html', 340, 200)) ;
// Create the "Find" toolbar button.
var oFindItem = new FCKToolbarButton('My_Find', FCKLang['DlgMyFindTitle']);
oFindItem.IconPath = FCKPlugins.Items['findreplace'].Path + 'find.gif' ;
// 'My_Find' is the name used in the Toolbar config.
FCKToolbarItems.RegisterItem( 'My_Find', oFindItem ) ;
// Create the "Replace" toolbar button.
var oReplaceItem = new FCKToolbarButton( 'My_Replace', FCKLang['DlgMyReplaceTitle']);
oReplaceItem.IconPath = FCKPlugins.Items['findreplace'].Path + 'replace.gif';
// 'My_Replace' is the name used in the Toolbar config.
FCKToolbarItems.RegisterItem('My_Replace', oReplaceItem);
Installing a plugin
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: