FCKEditor是一個(gè)功能強大的開(kāi)源在線(xiàn)編輯器，所以是非常適合我等兜兜無(wú)啥銀子的人拿來(lái)“把玩”的~~~呵呵。一個(gè)產(chǎn)品即使功能再強大也不能滿(mǎn)足所有用戶(hù)的需求，當然FCKEditor也不例外咯。就拿我現在所開(kāi)發(fā)的一個(gè)系統（工作流）來(lái)說(shuō)，就遇到了FCKEditor不能滿(mǎn)足我的要求的情況。因為我想在工具欄中加入自己的操作控制按鈕，配置當然搞不定咯，就只有改源代碼了?？梢豢碏CKEditor經(jīng)過(guò)處理后的JS源碼，頭立刻就大了——無(wú)換行無(wú)注釋?zhuān)淮蠖袹S代碼堆在那里，想看懂幾乎沒(méi)門(mén)。當然它這樣做也是有好處的，要不這大的一個(gè)東西加載怎么會(huì )那么快呢?？床欢幚砗蟮腏S源碼，我們可以看有格式的源碼嘛，所以就上網(wǎng)down了一個(gè)2.4的FCKEditor。好了，現在就讓我們開(kāi)始怎么一步一步的加入我們自己的操作菜單到工具欄中去。
比如我想加一個(gè)我自己的輸入框用來(lái)控制日期的輸入，即該輸入框只能通過(guò)選擇來(lái)選擇日期，這個(gè)我們結合日期控件my97來(lái)做，呵呵，充分利用已有的成果。有人會(huì )說(shuō)，我直接改它的對話(huà)框不就得了，當然這也是可以的，可我們今天要做的就是如何加入自己的工具欄操作，這樣以后就可以依次類(lèi)推，加入任何想要加入的操作了:-)。
首先，我們給這個(gè)日期輸入框定一個(gè)名字，就叫做CTRL_Date吧。第一步嘛，我們就直接在fckconfig.js文件中的Basic工具條集（FCKConfig.ToolbarSets["Basic"]）中加入這個(gè)名稱(chēng)，加進(jìn)去很簡(jiǎn)單吧，呵，不多說(shuō)了。然后呢，也得給它弄個(gè)中文名稱(chēng)什么的吧，直接打開(kāi)語(yǔ)言文件zh-cn.js，英文的就不管了哈，加入：CTRL_Date : "日期控件"。另外還得加一個(gè)上下文語(yǔ)言提示菜單，這樣在編輯區域內就可以通過(guò)右鍵選擇屬性來(lái)進(jìn)行編輯操作了。也是在zh-ch.js中加入：CTRLDateProp : "日期控件屬性"。到這里，又要回到fckconfig.js文件中了，我們在FCKConfig.ContextMenu中加入CTRL_Date，這樣才能使其擁有上下文菜單嘛。到這里，基礎工作就做完了，呵呵，然后就是艱巨的源碼改造工程了，當然了也不要怕咯，一步一步來(lái)就沒(méi)問(wèn)題了~~@_@
我們解壓下載的FCKEditor2.4，然后找到fckregexlib.js文件，找到其中的NamedCommands，然后把CTRL_Date加到最后，然后再修改fckeditor處理后的最終JS文件fckeditorcode_ie.js（只改IE的，至于FF就不管了，對不起它了，嘿）。網(wǎng)上說(shuō)可以用一個(gè)什么程序來(lái)進(jìn)行源碼打包的，可我在下的壓縮包里沒(méi)看到呢，所以就只有手動(dòng)修改這個(gè)最終的文件了。在該文件中找到NamedCommands這一位置然后在最后加入CTRL_Date，這樣就注冊了一個(gè)命令CTRL_Date了。然后再找到源代碼文件夾中的fckcommands.js文件，是不是看到很多case啊，呵，這就是工具欄中每個(gè)操作的命令了。我們依葫蘆畫(huà)瓢，在最后加上：case 'CTRL_Date':oCommand=new FCKDialogCommand('CTRL_Date',FCKLang.CTRL_Date,'dialog/workflow/fck_ctrl_date.html',380,230);break ;這個(gè)意思就是說(shuō)，當你單擊工具欄上的日期控件的時(shí)候就會(huì )以模式對話(huà)框打開(kāi)dialog/workflow/fck_ctrl_date.html這個(gè)網(wǎng)頁(yè)文件，至于是什么內容，我們待會(huì )再說(shuō)。這樣寫(xiě)好后，我們就可以加入到fckeditorcode_ie.js文件中了。我們在fckeditorcode_ie.js文件中找到new FCKUndefinedCommand()這個(gè)位置，然后在它之后的break;之后加上我們剛才寫(xiě)的代碼（注意把oCommand改為B后再加入，因為我的最終處理源碼中是B，估計這樣簡(jiǎn)寫(xiě)也是為了減少源碼的大小吧）。這兩個(gè)步驟完成后，我們就可以在工具欄中單擊日期控件時(shí)打開(kāi)我們自己定義的日期控件屬性編輯的網(wǎng)頁(yè)文件了。
然后還一工程就是增加該控件的上下文菜單，要不然在編輯區域右鍵選擇時(shí)就會(huì )彈出輸入框的屬性和對話(huà)框了，這可不是我們想要的結果呢。我們還是先在源碼中修改，然后再復制到最終處理的源碼文件中去。找到文件fcktoolbaritems.js，也有很多case哦，看名字就知道這是設置工具欄中的按鈕項了。同樣，我們在最后加入：case 'CTRL_Date' : oItem=new FCKToolbarButton('CTRL_Date',FCKLang.CTRL_Date,null,null,null,null,51);break;注意其中的55表示的是該操作按鈕的圖標索引（這個(gè)索引指的是skins目錄下的fck_strip.gif文件中圖標的順序索引），我們使用和輸入框一樣的圖標就是51了。同樣，我們在最終文件fckeditorcode_ie.js中查找字符串a(chǎn)lert(FCKLang.UnknownToolbarItem.replace(/%1/g（注意把空格去掉），然后在它之前的default之前加入我們剛寫(xiě)的語(yǔ)句（同樣把oItem改成B）。這是完成上下文菜單的第一步，還有第二步也就是最后一步了，勝利就在眼前哦，加油了，呵呵。
接著(zhù)就是文件fck_contextmenu.js的修改了。一樣也是很多case，我們加入如下語(yǔ)句
case 'CTRL_Date':return{AddItems:function(A,B,C){if(C=='INPUT'&&B.type=='text'&&B.className=='_wf_date'){A.AddSeparator();A.AddItem('CTRL_Input',FCKLang.CTRLDateProp,51);}}};（注意這里的A，B，C就是源碼中menu，tag，tagName，這里直接寫(xiě)成A，B，C是為了直接插入到最終代碼中去而已）。注意到上面中不是有個(gè)B.className=='_wf_date'么？這是因為FCKEditor中已經(jīng)自帶了input輸入框的控制，所以這里我們用一個(gè)樣式名稱(chēng)來(lái)區別它自帶的還是我們自加的。當然這個(gè)樣式名稱(chēng)可以隨便取的，而且在fck_ctrl_date.html這個(gè)網(wǎng)頁(yè)文件（我們自己寫(xiě)的來(lái)編輯日期控件的屬性文件）中需要給日期控件也就是input輸入框加上className="_wf_date"屬性以示區別原有的input輸入框。當然，我們還要修改原來(lái)的input的case，在fckeditorcode_ie.js文件中找到字符串case 'TextField':return {AddItems所在的位置（如果找不到請去掉或增加空格），然后修改if中的條件，加一個(gè)&&B.className!='_wf_date'。最后就把我們寫(xiě)的上面的代碼加到TextField這個(gè)case之后就可以了。這樣修改后就會(huì )使當右鍵單擊某個(gè)元素時(shí)，如果是輸入框并且樣式名稱(chēng)不是我們指定的日期控件則會(huì )調用它自帶的輸入框屬性編輯網(wǎng)頁(yè)，如果樣式名稱(chēng)是我們自己定義的日期控件的名稱(chēng)則會(huì )調用我們自己編輯的屬性網(wǎng)頁(yè)，這樣就達到了同是輸入框在查看屬性時(shí)分別調用不同屬性編輯網(wǎng)頁(yè)的目的了。
好了，完成上面的所有步驟后就可以保存修改后的fckeditorcode_ie.js文件了。這里還有一點(diǎn)工作要做哦，就是在dialog目錄下新建一個(gè)目錄workflow，然后在它下新建一個(gè)日期控件屬性輸入的網(wǎng)頁(yè)文件fck_ctrl_date.html。具體的內容我們可以直接copy FCKEditor自帶的fck_textfield.html網(wǎng)頁(yè)文件的內容過(guò)來(lái)，然后簡(jiǎn)單的修改下就可以了，但重要的是別忘了在ok函數中給你的日期控件加上className="_wf_date"屬性哦，否則右鍵屬性查看時(shí)則會(huì )調用FCKEditor自帶的文本框輸入的編輯網(wǎng)頁(yè)了。
經(jīng)過(guò)這么多步驟，已經(jīng)全部完工了。趕快打開(kāi)你的在線(xiàn)編輯器看看吧~~~~
聯(lián)系客服
