以建立一個簡單的超級連結為例。可以從已經存在的placeholder外掛程式的目錄作為基本的骨架。
1. 命名外掛程式名稱為:"InsertLink". ,並建立同名的目錄,並且在InsertLink目錄下建立一個Lang的目錄,lang目錄下至少有一個檔案en.js。該檔案中至少要有按鈕和對話方塊標題的國際化資訊,比如:
FCKLang.InsertLinkBtn = 'Insert/Edit Link' ; //按鈕的標題
FCKLang.InsertLinkDlgTitle = 'Link Properties' ; //對話方塊的標題
2:圖片,在InsertLink檔案夾中添加圖片檔案,最好將圖片檔案命名為和外掛程式名一樣的名稱。圖片的大小要求是20*21,並且是透明的。
3:javascript:
添加fckplugin.js檔案到InsertLink目錄。
註冊相關命令:
註冊命令的方法是FCKCommands.RegisterCommand(命令名稱,對話方塊命令)
建立對話方塊命令的格式:new FCKDialogCommand( 命令名稱, 對話方塊標題,url路徑, 寬度,高度)
FCKCommands.RegisterCommand( 'InsertLink', new FCKDialogCommand( 'InsertLink', FCKLang.InsertLinkDlgTitle,
FCKPlugins.Items['InsertLink'].Path + 'fck_InsertLink.html', 340, 200 ) ) ;
// 建立工具列按鈕 new FCKToolbarButton( 按鈕名稱, 按鈕標題 ) ;
var oInsertLinkItem = new FCKToolbarButton( 'InsertLink', FCKLang.InsertLinkBtn ) ;
oInsertLinkItem.IconPath = FCKPlugins.Items['InsertLink'].Path + 'InsertLink.gif' ;
FCKToolbarItems.RegisterItem( 'InsertLink', oInsertLinkItem ) ;
//建立用於所有InsertLink操作的對象
var FCKInsertLink = new Object() ;
//在當前的選擇上插入一個超級連結
// 這個添加的方法將在快顯視窗點擊ok按鈕時被調用。
// 該方法將會接收從對話方塊中傳來的值。
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
在InsertLink目錄下添加請求的檔案。
請求檔案的模板代碼:
<!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">
var oEditor = window.parent.InnerDialogLoaded() ;
var FCK = oEditor.FCK ;
var FCKLang = oEditor.FCKLang ;
var FCKInsertLink = oEditor.FCKInsertLink ;
window.onload = function ()
{
LoadSelected() ; //see function below
window.parent.SetOkButton( true ) ;
}
//從編輯器中得到當前的被選擇的元素,有以下兩種方法:
//1. 可用於image等元素的選擇。
//var eSelected = oEditor.FCKSelection.GetSelectedElement() ;
//2. 由於有內部文本的元素
var eSelected = FCK.Selection.MoveToAncestorNode( 'A' )
if ( eSelected )
FCK.Selection.MoveToNode( eSelected ) ;
//如果超級練級被選擇,那麼顯示超級連結的屬性
function LoadSelected()
{
if ( !eSelected )
return ;
txtHref.value = eSelected.href ;
txtCaption.value = eSelected.innerText ;
//適合於第一種選擇操作的代碼:
// if ( eSelected.tagName == 'IMG' ) {
// -- code for setting dialog values -- }
// else
// eSelected == null ; //this will replace the current selection if not the right type
}
//點擊ok按鈕發生的操作
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 -->
5:編輯fckconfig.js檔案,並加入下列代碼,註冊外掛程式。
FCKConfig.Plugins.Add( 'InsertLink', 'en' ) ;
//在工具列集合中定義命令名稱。
FCKConfig.ToolbarSets["Default"] = [ , ['InsertLink']