以前在弄FCKeditor的时候写了一篇如何添加自定义工具栏的文章，请参看：http://j2ee.blog.sohu.com/36813753.html。不过那时候虽然写了具体的操作方法，不过写的比较杂乱，呵呵，什么都写了，所以可能来实践的时候会看的比较辛苦：-）同时也无意中发现了网上很多人也确实在找这样的东东，所以今天有时间就重新整理了一份如何添加自定义工具栏在FCKeditor编辑器中详细步骤。
话不多说了，首先做准备工作，下载相应的文件，呵呵。目前FCKeditor已经升级到2.5了，下载连接如下：
1.FCKeditor下载主页面：http://www.fckeditor.net/download
2.FCKeditor V2.5的下载页面：http://sourceforge.net/project/downloading.php?group_id=75348&filename=FCKeditor_2.5.1.zip
3.另外的，如java和.net的上传等工具包就根据自己的情况下载了。
我们今天来做一个非常简单的工具按钮，就是点击这个按钮后会弹出一个对话框，只有一个输入框，我们输入的任何内容都会被插入到编辑器中去。这个工具按钮我们就叫做：MyToolBar吧，呵~~~
一、修改fckconfig.js文件（位于FCKeditor_2.5.zip压缩包解压后的fckeditor目录下）
1.我们找到FCKConfig.ToolbarSets["Default"]这一行，在最后即'About'后添加一个工具按钮MyToolBar，名称为MyToolBar；
2.找到FCKConfig.DefaultLanguage，修改语言为：zh-cn；
3.找到FCKConfig.AutoDetectLanguage，设置为false，即关闭语言的自动检测功能；
二、修改zh-cn.js文件（位于editor\lang目录下）
1.在最后加入：MyToolBar : "我的自定义工具栏"
2.注意它前面的一个最后要加多一个逗号；
三、修改源码
1.打开文件fckregexlib.js（位于editor\_source\internals）；
2.找到NamedCommands这一行，在最后加入：MyToolBar
3.然后再打开同目录下的fckcommands.js文件；
4.找到FCKCommands.GetCommand函数，在其中加入：
case 'MyToolBar' : oCommand = new FCKDialogCommand( 'MyToolBar', FCKLang.MyToolBar , 'dialog/MyToolBar.html', 450, 400 ) ; break ;
5.然后再打开同目录下的fcktoolbaritems.js文件；
6.找到FCKToolbarItems.GetItem函数，在其中加入：
case 'MyToolBar' : oItem = new FCKToolbarButton( 'MyToolBar' , FCKLang.MyToolBar, null, null, null, true, 72 ) ; break ;
这里72是表示skins目录下各个皮肤目录中fck_strip.gif图片文件中的图片索引，我们这里用和命令ShowBlocks一样的图标（一个问号图片）。
四、建立模式对话框文件
1.打开目录editor\dialog，在其下建立文件：MyToolBar.html
2.内容如下：
01 <html>...</html><html xmlns="http://www.w3.org/1999/xhtml">
02 <head>...</head><head>
03 <title></title>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <meta content="noindex, nofollow" name="robots" />
06 <script src="common/fck_dialog_common.js" type="text/javascript"></script>
07 <script type="text/javascript">
08
09 var oEditor = window.parent.InnerDialogLoaded() ;
10
11 window.onload = function()
12 ...{
13 window.parent.SetOkButton( true ) ;
14 window.parent.SetAutoSize( true ) ;
15 }
16
17 function Ok()
18 ...{
19 var oActiveEl = oEditor.FCK.EditorDocument.createElement( 'SPAN' ) ;
20 oActiveEl.innerHTML = GetE('txtName').value ;
21 oEditor.FCKUndo.SaveUndoStep() ;
22 oActiveEl = oEditor.FCK.InsertElement( oActiveEl ) ;
23
24 return true ;
25 }
26 </script>
27 </head>
28 <body>...</body><body style="overflow: hidden">
29 <table width="100%" style="height: 100%">
30 <tr>
31 <td align="center">
32 <table cellspacing="0" cellpadding="0" border="0">
33 <tr><td>请输入文字：<input id="txtName" type="text"/></td></tr>
34 </table>
35 </td>
36 </tr>
37 </table>
38 </body>
39 </html>
五、打包修改后的源代码
官方网站下载页面给出的那个压缩程序（.net写的）有问题，在运行的时候总是报错：Unhandled Exception: System.NullReferenceException: Object reference not set。然后在fckeditor论坛上找相关的帖子时发现另外一个地方可以下载，呵呵，一样是官方的，不过是php编译后的可执行程序。在windows下可以直接运行，非常方便。大家可以到这里下载：http://dev.fckeditor.net/browser/FCKpackager/trunk/fckpackager.exe。注意这个是下载页面，然后在页面在最下方点那个“downloading”下载即可！注意下下来的文件就是一个可执行程序fckpackager.exe。
1.copy这个程序（fckpackager.exe）到fckeditor目录下。
2.打开一个DOS窗口，定位到当前目录；
3.运行fckpackager命令即可。
4.命令运行后，DOS窗口会列出一长串的JS清单，然后最后会显示：
Number of files processed: 84
Original size............: 568,563 bytes
Output file size.........: 240,124 bytes (42.23% of original)
The generation of 2 files has been completed in 3.3316287994 seconds.
这样就表示文件已经压缩成功了！
六、查看运行效果
打开目录_samples\html下的sample01.html文件，我们就可以在页面上的最后一个工具栏发现我们刚添加的这个按钮命令了。
七、添加上下文菜单
我们在使用FCKeditor来添加一个单行输入框的时候，添加成功后会发现在编辑区域我们通过在该input员素上点右键就可以很方便的来编辑我们刚才输入的内容。这就是fckeditor中的contextmenu了，我们也可以非常方便的为我们自定义的工具栏来添加上下文菜单。
1.打开源文件夹中internals目录下的fck_contextmenu.js文件；
2.找到函数FCK_ContextMenu_GetListener，在最后加入一指定的CASE代码，具体的视自己的情况而写；
3.修改fckconfig.js在FCKConfig.ContextMenu的最后加入一菜单名称，注意要和你的第二步中的case的条件名称一样；
4.另外在zh-cn.js中添加一个上下文菜单的中文名称，然后在第二步中的代码中的menu.AddItem处使用该名称，通常的命名规范就是你的工具按钮的命令名称后加一个Prop;
通过这几步后就可以很方便的添加一个上下文菜单了，我前面的一篇文章也提到了这个，可以参考一下。至此，我们对fckeditor进行自定义工具栏的添加就算完成了。可以试一试哦，如果大家觉得好的话也顶一下和鼓励下咯~
另外，附件里已经是按照上面说的添加成功的的编辑器，大家可以试一试！
分享到：
相关推荐
我想在FCKeditor 中的工具栏上添加一个按钮，在哪个配置文件中修改？答案很简单。
最近项目需要对已有的FCKeditor添加新的功能，以前的做法只是在外壳处再次封装，这次无法满足需求只能进行内部修改了。
6月24日再此更新，此次强调大家自己动手DIY：比如FCK自身工具栏上按钮的增删、位置的移动；再比如FCK插件及按钮的增删；安装方法：1、删除你PJBLOG原先的FCKEDITOR整个目录 2、上传压缩包中的所有文件到你的PJBLOG...
ToolBarCanCollapse=true/false 是否允许展开/折叠工具栏 ToolbarSets=object 允许使用TOOLBAR集合 ToolbarStartExpanded=true/false 开启是TOOLBAR是否展开 UseBROnCarriageReturn=true/false 当回车时是产生BR...
9.简介、新闻、产品、图片、下载、在线留言、常见问题模块多级栏目添加功能，栏目显示方式可通过后台控制。 10.后台使用所见即所得的编辑器ckeditor，轻松编辑文字、图片。 11.后台信息支持批量删除、批量排序等...
1.1.3 ASP.NET开发工具 1.1.4 ASP.NET客户端 1.1.5 ASP.NET 3.5新增控件 1.1.6 ASP.NET 3.5 AJAX 1.2 .NET应用程序需框架 1.2.1 什么是.NET应用程序框架 1.2.2 公共语言运行时（CLR） 1.2.3 .NET Framework 类库 1.3...
1.1.3 ASP.NET开发工具 1.1.4 ASP.NET客户端 1.1.5 ASP.NET 3.5新增控件 1.1.6 ASP.NET 3.5 AJAX 1.2 .NET应用程序需框架 1.2.1 什么是.NET应用程序框架 1.2.2 公共语言运行时（CLR） 1.2.3 .NET Framework 类库 1.3...
1.1.3 ASP.NET开发工具 1.1.4 ASP.NET客户端 1.1.5 ASP.NET 3.5新增控件 1.1.6 ASP.NET 3.5 AJAX 1.2 .NET应用程序需框架 1.2.1 什么是.NET应用程序框架 1.2.2 公共语言运行时（CLR） 1.2.3 .NET Framework 类库 1.3...
1.1.3 ASP.NET开发工具 1.1.4 ASP.NET客户端 1.1.5 ASP.NET 3.5新增控件 1.1.6 ASP.NET 3.5 AJAX 1.2 .NET应用程序需框架 1.2.1 什么是.NET应用程序框架 1.2.2 公共语言运行时（CLR） 1.2.3 .NET Framework 类库 1.3...
1.1.3 ASP.NET开发工具 1.1.4 ASP.NET客户端 1.1.5 ASP.NET 3.5新增控件 1.1.6 ASP.NET 3.5 AJAX 1.2 .NET应用程序需框架 1.2.1 什么是.NET应用程序框架 1.2.2 公共语言运行时（CLR） 1.2.3 .NET Framework 类库 1.3...
目录 第一篇 .NET基础 第 1 章认识 ASP.NET 3.5 1.1 什么是ASP.NET 1.1.1 .NET 历史与展望 1.1.2 ASP.NET 与ASP ...18.5.1 在客户端添加WCF 服务 18.5.2 在客户端使用WCF 服务 18.6 小结 第 19 章 WPF...
-修正EnableMaximize属性不能使Window最大化的BUG，修正了双击标题栏不能最大化的BUG。 -删除Button控件的SystemIcon属性，比如以前这样定义SystemIcon="Close"，现在需要这样定义Icon="SystemClose"。 -Window...
有添加图片水印和文字水印，可以设置水印位置，透明度、设置对线段锯齿状边缘处理、水印图片的路径，水印一般格式是gif，png,这种图片可以设置透明度、水印旋转等，可以参考代码加以改进做成小工具。 Java右键弹出...
-修正EnableMaximize属性不能使Window最大化的BUG，修正了双击标题栏不能最大化的BUG。 -删除Button控件的SystemIcon属性，比如以前这样定义SystemIcon="Close"，现在需要这样定义Icon="SystemClose"。 -Window...