一：基于對(duì)話框的插件：一步一步創(chuàng)建基于對(duì)話框的fck插件。
?
以創(chuàng)建一個(gè)簡(jiǎn)單的超級(jí)鏈接為例。可以從已經(jīng)存在的placeholder插件的目錄作為基本的骨架。
?
1. 命名插件名稱為："InsertLink".?，并建立同名的目錄，并且在InsertLink目錄下創(chuàng)建一個(gè)Lang的目錄，lang目錄下至少有一個(gè)文件en.js。該文件中至少要有按鈕和對(duì)話框標(biāo)題的國(guó)際化信息，比如：
FCKLang.InsertLinkBtn = 'Insert/Edit Link' ; //按鈕的標(biāo)題
FCKLang.InsertLinkDlgTitle = 'Link Properties' ; //對(duì)話框的標(biāo)題
2：圖片，在InsertLink文件夾中添加圖片文件,最好將圖片文件命名為和插件名一樣的名稱。圖片的大小要求是20*21，并且是透明的。
3：javascript：
添加fckplugin.js文件到InsertLink目錄。
注冊(cè)相關(guān)命令：
注冊(cè)命令的方法是FCKCommands.RegisterCommand（命令名稱，對(duì)話框命令）
創(chuàng)建對(duì)話框命令的格式：new FCKDialogCommand( 命令名稱, 對(duì)話框標(biāo)題,url路徑, 寬度,高度)?
?
FCKCommands.RegisterCommand( 'InsertLink', new FCKDialogCommand( 'InsertLink', FCKLang.InsertLinkDlgTitle, ?
FCKPlugins.Items['InsertLink'].Path + 'fck_InsertLink.html', 340, 200 ) ) ;?
?
// 創(chuàng)建工具欄按鈕 new FCKToolbarButton( 按鈕名稱,?按鈕標(biāo)題 ) ;
var oInsertLinkItem = new FCKToolbarButton( 'InsertLink', FCKLang.InsertLinkBtn ) ;?
oInsertLinkItem.IconPath = FCKPlugins.Items['InsertLink'].Path + 'InsertLink.gif' ;?
FCKToolbarItems.RegisterItem( 'InsertLink', oInsertLinkItem ) ;?
?
//創(chuàng)建用于所有InsertLink操作的對(duì)象?
var FCKInsertLink = new Object() ;?
?
//在當(dāng)前的選擇上插入一個(gè)超級(jí)鏈接
// 這個(gè)添加的方法將在彈出窗口點(diǎn)擊ok按鈕時(shí)被調(diào)用。
//?該方法將會(huì)接收從對(duì)話框中傳來的值。
?
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目錄下添加請(qǐng)求的文件。
請(qǐng)求文件的模板代碼：
<!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 ) ;
}?
?
//從編輯器中得到當(dāng)前的被選擇的元素，有以下兩種方法：?
?
//1. 可用于image等元素的選擇。
//var eSelected = oEditor.FCKSelection.GetSelectedElement() ;?
?
//2. 由于有內(nèi)部文本的元素
var eSelected = FCK.Selection.MoveToAncestorNode( 'A' )?
if ( eSelected ) ?
FCK.Selection.MoveToNode( eSelected ) ;?
?
//如果超級(jí)練級(jí)被選擇，那么顯示超級(jí)鏈接的屬性
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?
?
}?
?
//點(diǎn)擊ok按鈕發(fā)生的操作
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文件，并加入下列代碼，注冊(cè)插件。
FCKConfig.Plugins.Add( 'InsertLink', 'en' ) ;?
//在工具欄集合中定義命令名稱。
FCKConfig.ToolbarSets["Default"] = [?
, ['InsertLink']?
posted on 2007-04-11 14:48
不做浮躁的人 閱讀(1433)
評(píng)論(0) 編輯 收藏