FCKeditor插件開發 示例(原創)

(FCKeditor.地址是:http://www.fckeditor.net/.我下載的版本是:<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" />2.6.3)

<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

 

What ?

      FCKeditor一直是web上編輯器的比較好的一個選擇,他是開源的,而且效果不錯。FCKeditor的插件是對FCKeditor的擴展功能。

Why?

儘管一般條件下FCKeditor能適應使用,但你可能對FCKeditor僅有的功能不滿意,好.FCKeditor提供了插件開放功能,只要你能想到,你就做吧。

How?

我就一個簡單的"Hello"爲例來介紹FCKeditor插件的開發(申明:俺也是菜鳥,有啥不對的地方,請指出來,大家進步啦。)

首先,進入FCKeditor編輯器目錄下的editor文件下的plugins目錄下。這個目錄是放Fckeditor插件的。So,建立一個文件夾,命名爲'hello'

第二步,進入'hello'文件夾。建立一個"fckplugin.js"的文件。這是fckeditor插件的所必須的,主要是插件註冊等等。

再建立語言文件。在'hello'文件夾下建立一個'lang'的文件夾。在'lang'文件夾下建立語言文件,Fckeditor插件的語言文件命名方式是:國家或地區.js。如中國是zh.js.簡體中文是zh-cn.js.英文是en.js等等。我們建立兩個"en.js""zh-cn.js"

然後編輯語言文件。我們編輯"en.js"。寫入以下內容:FCKLang.Hello="Hello";(注意包含";",js的代碼嘛),"zh-cn.js"中寫入:FCKLang.Hello="你好";

FCKeditor插件語言的命名方式爲:FCKLang.變量名="語言定義"

OK,語言問題定義完成了,然後是插件定義。

打開第二步的"fckplugin.js"

代碼:

 //註冊

 FCKCommands.RegisterCommand('hello',new FCKDialogCommand('hello',FCKLang.HelloB,FCKPlugins.Items['hello'].Path+"hello.html",200,200));

 //定義工具欄

 var NHello=new FCKToolbarButton('hello',FCKLang.Hello);

 NHello.IconPath=FCKPlugins.Items['hello'].Path+'hello.GIF';

 //註冊

 FCKToolbarItems.RegisterItem('hello',NHello);

 

 OK,不懂?詳細說明:

插件機制:註冊命令-定義工具欄-註冊到工具欄

 

 註冊命令:FCKCommands.RegisterCommand(命令名稱,對話框命令)

對話框命令:FCKDialogCommand(命令名稱,對話框標題,URl,寬度,高度)

 

這樣註冊命令就完成,然後定義一個工具欄

FCKToolbarButton(命令名稱,按鈕標題)

你最好添加一個圖標:IconPath=圖標地址

 現在命令也註冊完成,工具欄也定義好了,然後是添加:

FCKToolbarItems.RegisterItem(命令名稱,工具欄);

 

注意:”Hello.html”就是你要顯示html中應該包含如下語句.

<script language="javascript">

 

var dialog = window.parent ;

var oEditor = dialog.InnerDialogLoaded() ;

var FCKLang = oEditor.FCKLang ;

</script>

 

 OK.插件製作完畢了,怎麼顯示呢?

Fckeditor的目錄下找到 fckconfig.js”,這是fckeditor的設置文件。找到

” FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;”

添加:”FCKConfig.Plugins.Add(‘hello’,’zh-cn,en’);”

解釋:FCKConfig.Plugins.Add(插件名,’語言文件’);其中語言文件是可選的,如果沒有則自動設置。

然後在 FCKConfig.ToolbarSets["Default"]=..”中的”[]”中隨便添加’hello’

OK…!完成

 

好,我們來重新確認一下FCKEditor插件開發的過程:

 

 建立” fckplugin.js”-建立插件(語言文件等)-添加插件。

 

建立插件必要步驟:插註冊命令-定義工具欄-註冊到工具欄

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章