fckeditor 插件參考一

一:插件的目錄結構
插件目錄的名稱必須和插件的名稱一樣,而且目錄裏面必須包含一個fckplugin.js文件。可選包含一個lang目錄用來實現界面的國際化。每一個文件定義一種語言,文件名不包含.js,用FCKConfig.Plugins.Add()註冊。如果實現的插件命令沒有界面,也可以不需要支持任何語言。
比如:findreplace插件的目錄結構如下:
/editor/plugins/findreplace/fckplugin.js
/editor/plugins/findreplace/lang/en.js
/editor/plugins/findreplace/lang/zh.js
在fckplugin.js文件中定義你的插件,同時也應該註冊改命令,以及創建一個工具欄按鈕。

註冊代碼說明:
//註冊命令,RegisterCommand(命令名,命令)
FCKCommands.RegisterCommand(
'My_Find',
new FCKDialogCommand(
FCKLang['DlgMyFindTitle'],
FCKLang['DlgMyFindTitle'],
FCKConfig.PluginsPath + 'findreplace/find.html', 340, 170));

FCKCommands.RegisterCommand('My_Replace',
new FCKDialogCommand(
FCKLang['DlgMyReplaceTitle'],
FCKLang['DlgMyReplaceTitle'],
FCKConfig.PluginsPath + 'findreplace/replace.html', 340, 200)) ;

//創建工具欄按鈕,先創建,再註冊。
var oFindItem = new FCKToolbarButton('My_Find', FCKLang['DlgMyFindTitle']);
oFindItem.IconPath = FCKConfig.PluginsPath + 'findreplace/find.gif' ;
FCKToolbarItems.RegisterItem( 'My_Find', oFindItem ) ;

var oReplaceItem = new FCKToolbarButton( 'My_Replace', FCKLang['DlgMyReplaceTitle']);
oReplaceItem.IconPath = FCKConfig.PluginsPath + 'findreplace/replace.gif';
FCKToolbarItems.RegisterItem('My_Replace', oReplaceItem);

二:安裝插件:
安裝前把解壓的包拷貝到editor/plugins目錄下,然後按下列步驟進行:
1、先確定按鈕在工具欄的位置
最好在定製的配置文件中,新寫一個工具欄來包含新的插件。

定製配置文件:FCKConfig.ToolbarSets['PluginTest'] = [
['Source'],
['Placeholder'],
['My_Find', 'My_Replace'],
['Table','-',
'TableInsertRow', 'TableDeleteRows',
'TableInsertColumn', 'TableDeleteColumns',
'TableInsertCell', 'TableDeleteCells',
'TableMergeCells', 'TableSplitCell'
],
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;2:添加插件同樣,可以直接在定製文件中添加插件。可以直接把插件放置到默認目錄下,或者在FCKConfig.Plugins.Add方法裏面的第三個參數指定插件所在的位置。//代碼分析:FCKConfig.Plugins.Add( pluginName, availableLanguages, pathToPlugin )
pluginName: 插件名稱或者插件目錄名稱.
availableLanguages: 逗號分割的可用語言列表.
pathToPlugin: 絕對路徑,指插件的所佔目錄,包括插件本身一層目錄

在默認位置添加插件FCKConfig.Plugins.Add( 'findreplace', 'en,it' ) ;
在其他位置添加插件,在add方法傳遞插件的絕對路徑。FCKConfig.PluginsPath = FCKConfig.BasePath.substr(0, FCKConfig.BasePath.length - 7) + '_samples/_plugins/' ;
var sOtherPluginPath = FCKConfig.BasePath.substr(0, FCKConfig.BasePath.length - 7) + 'editor/plugins/' ;
FCKConfig.Plugins.Add( 'placeholder', 'en,it', sOtherPluginPath ) ;
FCKConfig.Plugins.Add( 'tablecommands', null, sOtherPluginPath ) ;
在彈出窗口上訪問編輯器:
1、如何在編輯器中插入文本:

前置約定:
插件名:insertvariables
插件位置:editor/plugins/insertvariables/

//創建自己的命令,不採用FCKDialogCommand的目的是FCKDialogCommand使用的是fck的缺省佈局。
var InsertVariableCommand=function(){
};
InsertVariableCommand.prototype.Execute=function(){
}
//讓按鈕不能點擊。
InsertVariableCommand.GetState=function() {
return FCK_TRISTATE_OFF; }
//打開彈出窗口
InsertVariableCommand.Execute=function() {
window.open('insertVariable.do', 'insertVariable', 'width=500,height=400,scrollbars=no,scrolling=no,location=no,toolbar=no');
}
//註冊命令:
FCKCommands.RegisterCommand('Insert_Variables', InsertVariableCommand );
//註冊按鈕
var oInsertVariables = new FCKToolbarButton('Insert_Variables', 'insert variable');
oInsertVariables.IconPath = FCKConfig.PluginsPath + 'insertvariables/variable.gif';
FCKToolbarItems.RegisterItem( 'Insert_Variables', oInsertVariables );

//插入變量的請求頁面:insertVariable.do
<html><head> etc...
<script language="javascript">
<!--
var variable = null;
var FCK = window.opener.FCK;
function ok() {
if(variable != null) {
FCK.Focus(); //只在ie中有效
var B = FCK.EditorDocument.selection.createRange();
B.text = variable;
}
window.close();
}
//-->
</script>
</head>
<body>
etc..
<a href="#" onClick="variable='this is a test'; ok();">insert text</a>
</body>
</html>

//在fckconfig.js文件中加入以下字段
FCKConfig.Plugins.Add( 'insertvariables' ) ;
FCKConfig.ToolbarSets["myToolbar"] = [
['Bold','Italic','Underline'],['Insert_Variables']
] ;
        2、關聯上下文菜單選項:將插件的command註冊到上下文菜單中:FCK.ContextMenu.RegisterListener( {
AddItems : function( menu, tag, tagName )
{
// 符合條件顯示:if ( tagName == 'IMG' && !tag.getAttribute( '_fckfakelement' ) ) if ( tagName == 'SPAN' && tag._fckplaceholder )
{
// 顯示分隔符 menu.AddSeparator() ;
// 需要註冊命令名,標題,以及圖片路徑。 menu.AddItem( 'placeholder', FCKLang.PlaceholderDlgTitle, oPlaceholderItem.IconPath ) ;
}
}}
);
一:基於對話框的插件:一步一步創建基於對話框的fck插件。

以創建一個簡單的超級鏈接爲例。可以從已經存在的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'] 
 
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章