打開fckeditor下的fckconfig.js文件，找到FCKConfig.ToolbarSets["Default"]和FCKConfig.ContextMenu 在他們后面加上”InsertCode”，這個當(dāng)然是自己要添加的工具欄的名字了。然后，我們在“fckeditor\editor\lang\”文件夾下找到zh-cn.js，在最后一行后面加上以下2句：
//自定義
InsertCode:"插入代碼",
InsertCodeProp:"插入代碼屬性"
注意在這2句前DlgAboutInfo : "要獲得更多信息請訪問 "后面加個逗號。當(dāng)然，還可以同樣方法修改其他語言js文件，我就修改了繁體的zh.js和英文的en.js
現(xiàn)在，我們已經(jīng)定義了工具欄，開始第二大步，打開“fckeditor\editor\js\”下的fckeditorcode_gecko.js和fckeditorcode_ie.js，我們開始注冊工具欄；
第一步：在2個文件中搜索“InsertHorizontalRule”，在后面加上“InsertCode”。
第二步：同樣在2個文件中搜索“default:if (FCKRegexLib”，在“default”之前加上這么一句：
Case 'InsertCode':B = new FCKDialogCommand('InsertCode' , FCKLang.InsertCode ,'dialog/InsertCode/InsertCode.htm',510,450);break;
這句話意思就是，點擊工具欄圖標(biāo)時打開InsertCode.htm文件，定義了高和寬，至于文件內(nèi)容我們之后再說。
第三步：還是在這2個文件，搜索“default:alert(FCKLang.UnknownToolbarItem”，在“default”之前加上下面一句：
case 'InsertCode':B = new FCKToolbarButton('InsertCode' , FCKLang.InsertCode,null,null,null,null,67);
這句話意思是定義了工具欄的圖標(biāo)，F(xiàn)CKeditor的默認(rèn)圖標(biāo)文件是“fckeditor\editor\skins\default\”下的fck_strip.gif圖片，本人由于不想用重復(fù)的默認(rèn)圖標(biāo)，因此加了一個小圖片:
（20*20）
默認(rèn)圖片是16*2056，用PS把畫布加長到16*2072，再把自己的小圖片放到最下面，這樣，自定義的圖片剛好排67位。以后加新功能還可以依次增加此圖片。
好了。經(jīng)過這么3步，我們已經(jīng)把自定義工具欄加上去了。（在about之后，如果想加在中間，可以在剛才的第二和第三步里把添加的語句加到相應(yīng)的Case前面。）
做了這么多，任務(wù)算完成1/3，加油！
下面我們開始定義“InsertCode.htm”文件：
在“fckeditor\editor\dialog\”下新增InsertCode文件夾，新建HTM文件InsertCode.htm，里面代碼先拷貝“fckeditor\editor\dialog\fck_textfield.html”文件，好了，，大手術(shù)開始：
首先，在“<title></title>”中加上“Insert Code Properties”，這個是打開的新窗體的標(biāo)題；更改FCKeditor的JS文件“common/fck_dialog_common.js”的引用為“../common/fck_dialog_common.js”，再加上雙魚編輯器里的插入代碼腳本“<script src="code.js" type="text/javascript"></script>”。
然后更改“window.onload = function()”函數(shù)，把里面的if {} else{}刪除掉，再把function Ok()里的代碼全部刪除，加上下面2句：
oEditor.FCK.InsertHtml(code()) ;
window.parent.Cancel() ;
因為我們是更改成代碼格式的字符串加到FCKeditor編輯器里，所以用到內(nèi)置的InsertHtml函數(shù)，code()函數(shù)傳過來的是字符串；至于下面的html代碼，就更改為雙魚編輯器里InsertCode.htm的代碼（這里就不提供了，本人把更改好的放上來，這里只做個簡單說明）。
下面我們修改“code.js”文件里的代碼，把“function code()”里的
window.returnValue = FormateCode(str,language,showLine,canCollapse,canAllCollapse,allRegion);
window.close();
這兩句更改為一句：
return FormateCode(str,language,showLine,canCollapse,canAllCollapse,allRegion);
好了，至此，就可以使用插入代碼功能了。（添加其他功能的時候到這一步就可以完成了。）
完成后的編輯器圖片：
看見最后一個圖片沒，這就是了,點擊后出現(xiàn)的圖形為：
嘿，興沖沖地試了下，誒呀，怎么代碼前這么多紅XX呢？看下源代碼，原來里面的折疊圖片路徑全是錯的，這下郁悶了，試了N種方法，都沒用。無奈，最后查看FCKeditor中其他的htm文件，發(fā)現(xiàn)個東東：FCKConfig.BasePath，作用是取得editor文件夾的相對路徑，例如我的例子就是：“/AJAXEnabledWebSite1/FCKeditor/editor/”。好了，那現(xiàn)在為了得到我們存放折疊圖片的文件夾路徑，我們現(xiàn)在要定義一個變量，打開fckconfig.js文件，在文件最后一行之后加上這么一句：
FCKConfig.CodePath = FCKConfig.BasePath + 'dialog/InsertCode/codeimages/' ;
有了圖片路徑之后，我們的繼續(xù)修改“code.js”文件：
首先，在“function code()”前面加上下面3句：
var oEditor = window.parent.InnerDialogLoaded() ;
var FCKConfig = oEditor.FCKConfig ;
var CodeImagePath = FCKConfig.CodePath ;//得到圖片所在文件夾路徑
搜索“PiscesTextEditor/codeimages/”，全部替換為“”（即，全部刪除。注意：是空，不是空格；）
同樣搜索“PiscesTextEditor\/codeimages\/”，全部替換為“”
替換好之后，我們就要用到上面的圖片所在文件夾路徑了，我們這里使用正則替換字符串。
搜索“if (showLine) str = AddLineNumber(str); ”，在它前面加上下面2句：
var src = /\b(src=")\b/g;
str = str.replace(src,'src="'+CodeImagePath);//得到正確路徑
意思就是，把所有img控件的只有圖片名的src路徑替換為正確的相對路徑。
原文標(biāo)題：實戰(zhàn)FCKeditor，添加自定義工具欄---插入代碼 - EC80電子商務(wù)
原文網(wǎng)址：http://ec80.cn/html/64/n-1664.html