Take the example of creating a simple hyperlink. A basic skeleton can be used from the directory of placeholder plug-ins that already exist.
1. Named Plug-in name is: "Insertlink". , and create a directory with the same name, and a directory of Lang in the Insertlink directory, with at least one file en.js under the lang directory. The file should have at least internationalized information about the buttons and dialog box headers, such as:
fcklang.insertlinkbtn = ' Insert/edit Link '; The caption of the button
Fcklang.insertlinkdlgtitle = ' Link Properties '; Title of dialog box
2: Pictures, add a picture file to the Insertlink folder, preferably by naming the picture file as the name of the plug-in name. The size requirement for the picture is 20*21 and transparent.
3:javascript:
Add fckplugin.js file to Insertlink directory.
Register Related commands:
The way to register a command is fckcommands.registercommand (command name, Dialog command)
Create dialog Box command format: New Fckdialogcommand (Command name, dialog box title, URL path, width, height)
Fckcommands.registercommand (' Insertlink ', New Fckdialogcommand (' Insertlink ', Fcklang.insertlinkdlgtitle,
fckplugins.items[' Insertlink ']. Path + ' fck_insertlink.html ', 340, 200);
Create a toolbar button new Fcktoolbarbutton (Button name, button caption);
var oinsertlinkitem = new Fcktoolbarbutton (' Insertlink ', fcklang.insertlinkbtn);
Oinsertlinkitem.iconpath = fckplugins.items[' Insertlink ']. Path + ' insertlink.gif ';
Fcktoolbaritems.registeritem (' Insertlink ', oinsertlinkitem);
To create an object for all insertlink operations
var fckinsertlink = new Object ();
Inserts a hyperlink on the current selection
This added method will be invoked when the OK button is clicked on the pop-up window.
The method will receive the value from the dialog box.
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>");
}
4:html
Add the requested file under the Insertlink directory.
Request the template code for the file:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 transitional//en" >
<title>link properties</title>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<meta content= "noindex, nofollow" name= "robots" >
<script language= "JavaScript" >
var oeditor = window.parent.InnerDialogLoaded ();
var FCK = OEDITOR.FCK;
var Fcklang = Oeditor.fcklang;
var fckinsertlink = Oeditor.fckinsertlink;
Window.onload = function ()
{
Loadselected (); The below function
Window.parent.SetOkButton (TRUE);
}
To get the current selected element from the editor, there are two ways to do this:
1. Can be used for the selection of elements such as image.
var eselected = oEditor.FCKSelection.GetSelectedElement ();
2. Because there are elements of internal text
var eselected = FCK. Selection.movetoancestornode (' A ')
if (eselected)
FCK. Selection.movetonode (eselected);
If the super practice is selected, the properties of the hyperlink are displayed
function loadselected ()
{
if (!eselected)
return;
Txthref.value = Eselected.href;
Txtcaption.value = Eselected.innertext;
Code appropriate for the first selection operation:
if (Eselected.tagname = = ' IMG ') {
--Code for setting dialog values--}
Else
eselected = null; This would replace the current selection if isn't the right type
}
Click the OK button to take action
function Ok ()
{
if (document.getElementById (' Txthref '). Value.length > 0)
Fckinsertlink.add (Txthref.value, Txtcaption.value);
return true;
}
</script>
<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>
<!--end Code-->
5: Edit the Fckconfig.js file and add the following code to register the plugin.
FCKCONFIG.PLUGINS.ADD (' Insertlink ', ' en ');
Define the command name in the tool bar collection.
fckconfig.toolbarsets["Default" = [, [' Insertlink ']
