為FCKEditor添加自訂工具列

 FCKEditor是一個功能強大的開源線上編輯器，所以是非常適合我等兜兜無啥銀子的人拿來“把玩”的~~~呵呵。一個產品即使功能再強大也不能滿足所有使用者的需求，當然FCKEditor也不例外咯。就拿我現在所開發的一個系統（工作流程）來說，就遇到了FCKEditor不能滿足我的要求的情況。因為我想在工具列中加入自己的操作控制按鈕，配置當然搞不定咯，就只有改原始碼了。可一看FCKEditor經過處理後的JS源碼，頭立刻就大了——無換行無注釋，一大堆JS代碼堆在那裡，想看懂幾乎沒門。當然它這樣做也是有好處的，要不這大的一個東西載入怎麼會那麼快呢。看不懂處理後的JS源碼，我們可以看有格式的源碼嘛，所以就上網down了一個2.4的FCKEditor。好了，現在就讓我們開始怎麼一步一步的加入我們自己的操作菜單到工具列中去。

     比如我想加一個我自己的輸入框用來控制日期的輸入，即該輸入框只能通過選擇來選擇日期，這個我們結合日期控制項my97來做，呵呵，充分利用已有的成果。有人會說，我直接改它的對話方塊不就得了，當然這也是可以的，可我們今天要做的就是如何加入自己的工具列操作，這樣以後就可以依次類推，加入任何想要加入的操作了:-)。

     首先，我們給這個日期輸入框定一個名字，就叫做CTRL_Date吧。第一步嘛，我們就直接在fckconfig.js檔案中的Basic工具條集（FCKConfig.ToolbarSets["Basic"]）中加入這個名稱，加進去很簡單吧，呵，不多說了。然後呢，也得給它弄個中文名稱什麼的吧，直接開啟語言檔案zh-cn.js，英文的就不管了哈，加入：CTRL_Date : "日期控制項"。另外還得加一個上下文語言提示菜單，這樣在編輯地區內就可以通過右鍵選擇屬性來進行編輯操作了。也是在zh-ch.js中加入：CTRLDateProp : "日期控制項屬性"。到這裡，又要回到fckconfig.js檔案中了，我們在FCKConfig.ContextMenu中加入CTRL_Date，這樣才能使其擁有操作功能表嘛。到這裡，基礎工作就做完了，呵呵，然後就是艱巨的源碼改造工程了，當然了也不要怕咯，一步一步來就沒問題了~~@_@

     我們解壓下載的FCKEditor2.4，然後找到fckregexlib.js檔案，找到其中的NamedCommands，然後把CTRL_Date加到最後，然後再修改fckeditor處理後的最終JS檔案fckeditorcode_ie.js（只改IE的，至於FF就不管了，對不起它了，嘿）。網上說可以用一個什麼程式來進行源碼打包的，可我在下的壓縮包裡沒看到呢，所以就只有手動修改這個最終的檔案了。在該檔案中找到NamedCommands這一位置然後在最後加入CTRL_Date，這樣就註冊了一個命令CTRL_Date了。然後再找到原始碼檔案夾中的fckcommands.js檔案，是不是看到很多case啊，呵，這就是工具列中每個操作的命令了。我們依葫蘆畫瓢，在最後加上：case 'CTRL_Date':oCommand=new FCKDialogCommand('CTRL_Date',FCKLang.CTRL_Date,'dialog/workflow/fck_ctrl_date.html',380,230);break ;這個意思就是說，當你單擊工具列上的日期控制項的時候就會以強制回應對話方塊開啟dialog/workflow/fck_ctrl_date.html這個網頁檔案，至於是什麼內容，我們待會再說。這樣寫好後，我們就可以加入到fckeditorcode_ie.js檔案中了。我們在fckeditorcode_ie.js檔案中找到new FCKUndefinedCommand()這個位置，然後在它之後的break;之後加上我們剛才寫的代碼（注意把oCommand改為B後再加入，因為我的最終處理源碼中是B，估計這樣簡寫也是為了減少源碼的大小吧）。這兩個步驟完成後，我們就可以在工具列中單擊日期控制項時開啟我們自己定義的日期控制項屬性編輯的網頁檔案了。

     然後還一工程就是增加該控制項的操作功能表，要不然在編輯地區右鍵選擇時就會彈出輸入框的屬性和對話方塊了，這可不是我們想要的結果呢。我們還是先在源碼中修改，然後再複製到最終處理的源碼檔案中去。找到檔案fcktoolbaritems.js，也有很多case哦，看名字就知道這是設定工具列中的按鈕項了。同樣，我們在最後加入：case 'CTRL_Date' : oItem=new FCKToolbarButton('CTRL_Date',FCKLang.CTRL_Date,null,null,null,null,51);break;注意其中的55表示的是該操作按鈕的表徵圖索引（這個索引指的是skins目錄下的fck_strip.gif檔案中表徵圖的順序索引），我們使用和輸入框一樣的表徵圖就是51了。同樣，我們在最終檔案fckeditorcode_ie.js中尋找字串alert(FCKLang.UnknownToolbarItem.replace(/%1/g（注意把空格去掉），然後在它之前的default之前加入我們剛寫的語句（同樣把oItem改成B）。這是完成操作功能表的第一步，還有第二步也就是最後一步了，勝利就在眼前哦，加油了，呵呵。

     接著就是檔案fck_contextmenu.js的修改了。一樣也是很多case，我們加入如下語句
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，這裡直接寫成A，B，C是為了直接插入到最終代碼中去而已）。注意到上面中不是有個B.className=='_wf_date'嗎？這是因為FCKEditor中已經內建了input輸入框的控制，所以這裡我們用一個樣式名稱來區別它內建的還是我們自加的。當然這個樣式名稱可以隨便取的，而且在fck_ctrl_date.html這個網頁檔案（我們自己寫的來編輯日期控制項的屬性檔案）中需要給日期控制項也就是input輸入框加上className="_wf_date"屬性以示區別原有的input輸入框。當然，我們還要修改原來的input的case，在fckeditorcode_ie.js檔案中找到字串case 'TextField':return {AddItems所在的位置（如果找不到請去掉或增加空格），然後修改if中的條件，加一個&&B.className!='_wf_date'。最後就把我們寫的上面的代碼加到TextField這個case之後就可以了。這樣修改後就會使當按右鍵某個元素時，如果是輸入框並且樣式名稱不是我們指定的日期控制項則會調用它內建的輸入框屬性編輯網頁，如果樣式名稱是我們自己定義的日期控制項的名稱則會調用我們自己編輯的屬性網頁，這樣就達到了同是輸入框在查看屬性時分別調用不同屬性編輯網頁的目的了。

     好了，完成上面的所有步驟後就可以儲存修改後的fckeditorcode_ie.js檔案了。這裡還有一點工作要做哦，就是在dialog目錄下建立一個目錄workflow，然後在它下建立一個日期控制項屬性輸入的網頁檔案fck_ctrl_date.html。具體的內容我們可以直接copy FCKEditor內建的fck_textfield.html網頁檔案的內容過來，然後簡單的修改下就可以了，但重要的是別忘了在ok函數中給你的日期控制項加上className="_wf_date"屬性哦，否則右鍵屬性查看時則會調用FCKEditor內建的文字框輸入的編輯網頁了。

     經過這麼多步驟，已經全部完工了。趕快開啟你的線上編輯器看看吧~~~~