Step-by-Step
Create a Dialog Based Plug-In
This example will create a simple hyperlink in the editor. FCKeditor already contains a more sophisticated version of this, but it will still demonstrate the process of creating a dialog based plugin. As needed, you will copy files from the existing "placeholder" plugin to create the basic skeleton. Then, we will edit these files as needed.
Notes:
-- When referencing the plugin, keep casing consistent.
-- This example works in IE 6.0. I can't guarantee anything else.
-- Your browser may cache your pages, so every time you edit your .js file, clear the cache by going to Tools | Internet Options and "delete files". Then refresh your browser.
-- This post assumes that the FCKeditor folder is in the root of your website, and that all directories and files are in their original locations.
1. Choose a name for your plugin. In this example, we will use the name "InsertLink".
2. Create a new folder in the Plugins folder. Name it the same as your new plugin: "InsertLink"
3. Lang
A. Add a Lang folder to the "InsertLink" folder with at least one file: "en.js". Copy this from the placeholder plugin. You could add more of these for different languages.
B. Edit en.js. You only need the first two values in this file. Reword them as follows (notice the property name AND value need to be reworded):
FCKLang.InsertLinkBtn = 'Insert/Edit Link' ; //This will be the caption for your toolbar button
FCKLang.InsertLinkDlgTitle = 'Link Properties' ; //This will be the title of the dialog box
C. You can delete the rest of the lines. See the placeholder plugin for examples of how to use other values in your dialog.
4. Image
A. Add an image file to the InsertLink folder to be used in the toolbar. For now, you may copy in the .gif from the placeholder plugin.
B. Rename the file to: InsertLink.gif
C. If you want to create your own image, use 20x21 dimensions and use transparency.
5. Javascript
A. Add fckplugin.js to the InsertLink folder. If copying from the placeholder plugin, keep the same name.
B. Replace all the code with the following:
// Register the related command.
// RegisterCommand takes the following arguments: CommandName, DialogCommand
// FCKDialogCommand takes the following arguments: CommandName, Dialog Title, Path to HTML file, Width, Height
FCKCommands.RegisterCommand( 'InsertLink', new FCKDialogCommand( 'InsertLink', FCKLang.InsertLinkDlgTitle,
FCKPlugins.Items['InsertLink'].Path + 'fck_InsertLink.html', 340, 200 ) ) ;
// Create the toolbar button.
// FCKToolbarButton takes the following arguments: CommandName, Button Caption
var oInsertLinkItem = new FCKToolbarButton( 'InsertLink', FCKLang.InsertLinkBtn ) ;
oInsertLinkItem.IconPath = FCKPlugins.Items['InsertLink'].Path + 'InsertLink.gif' ;
FCKToolbarItems.RegisterItem( 'InsertLink', oInsertLinkItem ) ;
// The object used for all InsertLink operations.
var FCKInsertLink = new Object() ;
// Add a new InsertLink at the actual selection.
// This function will be called from the HTML file when the user clicks the OK button.
// This function receives the values from the Dialog
FCKInsertLink.Add = function( linkname, caption )
{
if(linkname.substr(0,4) != "http" && linkname.substr(0,4) != "HTTP")
linkname = "http://"+linkname ;
FCK.InsertHtml("<a href='"+linkname+"'>"+caption+"</a>") ;
}
//End code
C. Note that this is much more simplified from the placeholder plugin code. Study the additional functionality as needed to enhance your plugin.
6. HTML
A. Now you need to add an HTML file to the InsertLink folder.
B. FCKeditor will create a generic dialog box. Your HTML file will hold the inner content of the dialog box.
C. You may copy the file from the placeholder plugin. Make sure to rename it fck_InsertLink.html
D. Replace all the code with the following:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Link Properties</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta content="noindex, nofollow" name="robots">
<script language="javascript">
//Standard setup stuff (notice the command name used in the property names)
var oEditor = window.parent.InnerDialogLoaded() ;
var FCK = oEditor.FCK ;
var FCKLang = oEditor.FCKLang ;
var FCKInsertLink = oEditor.FCKInsertLink ;
window.onload = function () //Runs when the toolbar button is clicked and this page is loaded
{
LoadSelected() ; //see function below
window.parent.SetOkButton( true ) ; // Show the "Ok" button.
}
//Get the currently selected element from the editor. Two Options follow.
//1. Use this form for some elements such as images
//var eSelected = oEditor.FCKSelection.GetSelectedElement() ;
//2. Use this form for elements with inner text (including the if statement)
var eSelected = FCK.Selection.MoveToAncestorNode( 'A' )
if ( eSelected )
FCK.Selection.MoveToNode( eSelected ) ;
//If an anchor (A) object is currently selected, load the properties into the dialog
function LoadSelected()
{
if ( !eSelected )
return ;
txtHref.value = eSelected.href ;
txtCaption.value = eSelected.innerText ;
//following code would work with option 1 above.
// if ( eSelected.tagName == 'IMG' ) {
// -- code for setting dialog values -- }
// else
// eSelected == null ; //this will replace the current selection if not the right type
}
//Code that runs after the OK button is clicked
//If a link has been entered, pass the values to the Add() function in the fckplugin.js file.
function Ok()
{
if ( document.getElementById('txtHref').value.length > 0 )
FCKInsertLink.Add( txtHref.value, txtCaption.value ) ;
return true ;
}
</script>
</head>
<body scroll="no" style="OVERFLOW: hidden">
<table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td>
<table cellSpacing="0" cellPadding="0" align="center" border="0">
<tr>
<td>
Type the URL for the link<br>
<input id="txtHref" type="text"><br>
Type the caption for the link<br>
<input id="txtCaption" type="text">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
<!-- End Code -->
7. Edit the fckconfig.js file in the main FCKeditor folder.
A. Add the following line
FCKConfig.Plugins.Add( 'InsertLink', 'en' ) ;
B. Assuming that you are using the default toolbar configuration, add your new button to the toolbar.
Find the section that begins: FCKConfig.ToolbarSets["Default"] = [
Add the following to the end of the list of buttons:
, ['InsertLink']
8. Save all your files, clear the cache (see note above), and open/refresh your page that includes FCKEditor. You should see your new toolbar item at the end of the list.
9. Click your new button, and see the results.
RE: How To: Dialog Based Plugin
However, what about the ContextMenu configuration? I couldn't find where to place it: whether in the [pluginDir]/fckplugin.js, or in the global ~\editor\_source\internals\fckcontextmenu.js ??
Thanks for your help,
Cheers