以前在弄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是一款经典的开源HTML编辑器，它为网页开发者提供了一种方便、直观的在线文本编辑解决方案。这款编辑器以其轻量级、易于集成和高度可定制的特点，受到了广泛的欢迎。在...
步骤四：扩展或自定义工具栏 1. 扩展：寻找FCKeditor的插件，如"LineHeight"插件，它提供了行距选择菜单。下载并按照插件安装说明进行安装。 2. 自定义：如果你不想使用外部插件，可以手动添加行距功能。打开...
通过以上步骤，用户可以在不修改原始配置文件的情况下，轻松地为在线编译器中的FCKeditor自定义工具栏。这种方法不仅提高了用户的个性化体验，还简化了开发者的维护工作。当然，除了上述提到的方法外，还可以探索更...
FCKeditor是一款广泛使用的Web可视化文本编辑器，开发者可以利用它...通过以上步骤，你可以成功地为FCKeditor添加自定义按钮，并且使其具备特定的功能。这样，你就可以使你的Web应用提供更加丰富的用户体验和交互功能。
不过，FCKeditor在当时对自定义按钮的实现提供了一定的灵活性，下面是关于如何为FCKeditor添加自定义按钮的具体方法： 1. **添加按钮的图片**：FCKeditor将所有按钮的图片集中存放在一个图片文件中，该文件位于...
为了扩展其功能，我们可以利用其API和插件系统，添加自定义的上传模块。 添加多文件批量上传组件通常包括以下几个步骤： 1. **选择上传组件**：有许多开源的多文件上传组件可供选择，如jQuery File Upload、...
1. **自定义工具栏** 可以通过增加、删除或重组`ToolbarSets`中的元素来定制工具栏。例如，如果想在工具栏上添加一个“插入图片”的按钮，可以添加`['Image']`到对应的工具栏组。 2. **语言配置** FCKeditor支持...
- FCKeditor支持自定义工具栏，开发者可以根据需求调整工具栏按钮。 - 可以通过编写自定义插件扩展其功能，比如添加新的编辑命令或对特定格式的支持。 - 使用fckconfig.js和fckstyles.xml进行配置，可以限制用户...
根据文件信息，要为FCKEditor添加新的按钮和功能，主要分为以下步骤： 1. 配置新按钮 要添加一个新按钮，首先需要在`fckconfig.js`文件中的`FCKConfig.ToolbarSets`设置中添加按钮的名称。`ToolbarSets`是一个对象...
1. **自定义工具栏**：通过修改`fckconfig.js`文件，你可以定制编辑器的工具栏，添加或删除按钮。 2. **皮肤更换**：FCKeditor提供了多种皮肤，用户可以根据喜好选择，或者自定义皮肤。 3. **编辑器安全**：限制...
FCKeditor允许自定义工具栏按钮，添加插件，甚至改变编辑器的外观和行为。这部分内容会指导读者如何根据项目需求定制FCKeditor，实现特定的功能。 **6. 兼容性与问题解决** 由于FCKeditor需要在不同浏览器上运行，...
例如，可以创建一个新的工具栏按钮，当用户点击该按钮时，触发一个函数，该函数将遍历编辑器内的文本，应用排版规则。这些规则可以通过正则表达式或者DOM操作来实现，比如设置段落样式、调整字体大小、转换首行缩进...
这些示例可能展示了如何配置编辑器、如何处理文件上传、如何自定义工具栏等常见任务。 集成FCKeditor到Java Web应用中，你需要： 1. **导入jar包**：将`fckeditor-java-2.4.1.jar`添加到你的项目类路径中，这样你...
开发者还可以根据需求定制工具栏，添加自定义按钮或扩展功能。 5. **版本与更新** 虽然FCKeditor的最新版本已不再维护，但它有多个版本可供选择，适用于不同项目的需求。后来的CKEditor继承了FCKeditor的优点并...
**Fckeditor2.6简介** Fckeditor是一款基于Web的富文本编辑器，它允许用户在浏览器端进行文本格式化操作，支持多种浏览器和操作...通过正确处理编码问题和自定义工具栏，我们可以构建出符合特定需求的高效在线编辑器。
2. **自定义工具栏**：通过修改`fckconfig.js`，你可以根据需要自定义工具栏按钮，以控制用户可用的功能。 3. **插件开发**：FCKeditor提供了一套插件开发接口，允许开发者创建自定义的编辑器功能，如添加新的按钮...
2. **工具栏**: 可以自定义工具栏按钮，通过修改`Config.ToolbarSets`数组来实现。 3. **文件管理器**: 配置FCKeditor的文件上传和链接处理，如设置允许上传的文件类型、大小限制等。 ### 三、使用FCKEditor 1. *...
- 自定义工具栏：开发者可以根据需求自定义工具栏，通过修改`fckconfig.js`文件中的配置项，添加或移除工具栏按钮。 - 插件系统：FCKeditor支持插件扩展，可以为编辑器增加更多功能，如代码高亮、表格处理等。 - ...
3. 配置选项：可以根据需要调整编辑器的设置，例如禁用某些按钮或改变工具栏布局。 六、与其他系统的集成 FCKeditor可以轻松与PHP、ASP.NET、Java等后端技术集成，通过POST或GET方式传递编辑器内的内容。例如，在...