打开fckeditor下的fckconfig.js文件，找到FCKConfig.ToolbarSets["Default"]和FCKConfig.ContextMenu 在他们后面加上”InsertCode”，这个当然是自己要添加的工具栏的名字了。然后，我们在“fckeditor\editor\lang\”文件夹下找到zh-cn.js，在最后一行后面加上以下2句：
//自定义
InsertCode:"插入代码",
InsertCodeProp:"插入代码属性"
注意在这2句前DlgAboutInfo : "要获得更多信息请访问 "后面加个逗号。当然，还可以同样方法修改其他语言js文件，我就修改了繁体的zh.js和英文的en.js
现在，我们已经定义了工具栏，开始第二大步，打开“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;
这句话意思就是，点击工具栏图标时打开InsertCode.htm文件，定义了高和宽，至于文件内容我们之后再说。
第三步：还是在这2个文件，搜索“default:alert(FCKLang.UnknownToolbarItem”，在“default”之前加上下面一句：
case 'InsertCode':B = new FCKToolbarButton('InsertCode' , FCKLang.InsertCode,null,null,null,null,67);
这句话意思是定义了工具栏的图标，FCKeditor的默认图标文件是“fckeditor\editor\skins\default\”下的fck_strip.gif图片，本人由于不想用重复的默认图标，因此加了一个小图片:
（20*20）
默认图片是16*2056，用PS把画布加长到16*2072，再把自己的小图片放到最下面，这样，自定义的图片刚好排67位。以后加新功能还可以依次增加此图片。
好了。经过这么3步，我们已经把自定义工具栏加上去了。（在about之后，如果想加在中间，可以在刚才的第二和第三步里把添加的语句加到相应的Case前面。）
做了这么多，任务算完成1/3，加油！
下面我们开始定义“InsertCode.htm”文件：
在“fckeditor\editor\dialog\”下新增InsertCode文件夹，新建HTM文件InsertCode.htm，里面代码先拷贝“fckeditor\editor\dialog\fck_textfield.html”文件，好了，，大手术开始：
首先，在“<title></title>”中加上“Insert Code Properties”，这个是打开的新窗体的标题；更改FCKeditor的JS文件“common/fck_dialog_common.js”的引用为“../common/fck_dialog_common.js”，再加上双鱼编辑器里的插入代码脚本“<script src="code.js" type="text/javascript"></script>”。
然后更改“window.onload = function()”函数，把里面的if {} else{}删除掉，再把function Ok()里的代码全部删除，加上下面2句：
oEditor.FCK.InsertHtml(code()) ;
window.parent.Cancel() ;
因为我们是更改成代码格式的字符串加到FCKeditor编辑器里，所以用到内置的InsertHtml函数，code()函数传过来的是字符串；至于下面的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);
好了，至此，就可以使用插入代码功能了。（添加其他功能的时候到这一步就可以完成了。）
完成后的编辑器图片：
看见最后一个图片没，这就是了,点击后出现的图形为：
嘿，兴冲冲地试了下，诶呀，怎么代码前这么多红XX呢？看下源代码，原来里面的折叠图片路径全是错的，这下郁闷了，试了N种方法，都没用。无奈，最后查看FCKeditor中其他的htm文件，发现个东东：FCKConfig.BasePath，作用是取得editor文件夹的相对路径，例如我的例子就是：“/AJAXEnabledWebSite1/FCKeditor/editor/”。好了，那现在为了得到我们存放折叠图片的文件夹路径，我们现在要定义一个变量，打开fckconfig.js文件，在文件最后一行之后加上这么一句：
FCKConfig.CodePath = FCKConfig.BasePath + 'dialog/InsertCode/codeimages/' ;
有了图片路径之后，我们的继续修改“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路径替换为正确的相对路径。
原文标题：实战FCKeditor，添加自定义工具栏---插入代码 - EC80电子商务
原文网址：http://ec80.cn/html/64/n-1664.html