現(xiàn)在網(wǎng)上介紹FCKEditor如何配置,如何精簡(jiǎn)的例子非常之多,如有需要可以google一下,此處不必贅述?,F(xiàn)在介紹一下,如何自定義此編輯器,暫包括如何添加工具條上的item,產(chǎn)生響應(yīng),添加右鍵菜單。IT SEEMS VERY EASY!
閑言少敘,書(shū)歸正傳。 一、自定義右鍵菜單: 1、 首先,在editor/lang/zh-cn.js里添加你所要添加的工具條item的名字,此文件定義了一個(gè)FCKLang變量,仿照里邊的格式寫(xiě)哦,如:First: "第一",注意,如果是不在倒數(shù)第二行(倒數(shù)第一行是“}”),后邊的這個(gè)逗號(hào)是一定要有的,不然網(wǎng)頁(yè)中不會(huì)出現(xiàn)編輯器,筆者曾經(jīng)犯過(guò)如此低級(jí)的錯(cuò)誤,待醒悟后,找一僻靜之所大嘴巴子招呼;呵呵,我們是中國(guó)人,自然在冒號(hào)后對(duì)應(yīng)漢語(yǔ),這也是將來(lái)在網(wǎng)頁(yè)中顯示的內(nèi)容。 2、 之后,在editor/_source/internals/fckcommands.js 里新建一個(gè)command:case ‘First‘: oCommand = new FCKFirstCommand ( ‘First‘, FCKLang.First); break注意那個(gè)紅色字體的FCKFirstCommand了么?這個(gè)是一個(gè)自定義的command,稍候?qū)⒂懻撍?/p> 3、 然后,在editor/_source/internals/fckcontextmenu.js 添加一個(gè)context menu 。 在case ‘Generic‘ : 下面添加如下: oGroup.Add( new FCKContextMenuItem( this, ‘First‘, FCKLang.First, true ) ) ; 其中第四個(gè)布爾類型的參數(shù),如果指定為true,說(shuō)明菜單有圖標(biāo),反之則無(wú)。在此,我指明了我所自定義的菜單是有圖標(biāo)的,那么我就應(yīng)該把圖標(biāo)放在editor\skins\xxx\toolbar目錄下,其中xxx就是你在你的配置文件里選擇的編輯器的皮膚,但是我們的圖標(biāo)命名可是有學(xué)問(wèn)的,必須是如FCKContextMenuItem構(gòu)造函數(shù)(且這么叫它)第二個(gè)字符串參數(shù)的小寫(xiě)字母形式,如,這里我的圖標(biāo)被命名為first.gif了。 Ok,如此右鍵菜單就被添加上去了,運(yùn)行你的網(wǎng)頁(yè),看看FCKEditor是否奏效?如果不奏效的話就要重新參考此文嘍^_^。 4、然后,還有最關(guān)鍵的一步:用editor下的fckeditor.original.html網(wǎng)頁(yè)的內(nèi)容代替fckeditor.html的內(nèi)容,同時(shí)不要忘記備份fckeditor.html文件! 5、現(xiàn)在開(kāi)始討論步驟2中的FCKFirstCommand。菜單添加上其了,你總得讓丫擁有什么功能吧?好,在editor/_source/commandclasses/fck_othercommands.js里新建這個(gè)類:
一般建立好類后,還要建立兩個(gè)靜態(tài)函數(shù):xxx .prototype.Execute,xxx .prototype.GetState。前者是事件處理函數(shù),即點(diǎn)擊了該右鍵菜單所要執(zhí)行的功能全部寫(xiě)在這個(gè)函數(shù),后者返回菜單的狀態(tài)(可用?不可用?)。在此為了演示,我們實(shí)現(xiàn)一個(gè)最簡(jiǎn)單的功能: FCKPageCommand.prototype.Execute = function(){ window.alert("It works!");}夠簡(jiǎn)單吧,只是不疼不癢的彈出一個(gè)提示框。 當(dāng)然,這里我們也可以不用自定義的FCKFirstCommand,而直接用FCKEditor定義好的command,比如FCKDialogCommand,它也定義在fck_othercommands.js里,當(dāng)然如果這樣的話,彈出的會(huì)是一個(gè)dialog。 再次運(yùn)行網(wǎng)頁(yè),右擊,點(diǎn)擊你的自定義菜單,是否彈出提示框呢? |
|
來(lái)自: WindySky > 《FCKeditor》