再谈FCKeditor添加自定义工具栏的问题

最新推荐文章于 2024-09-14 09:30:00 发布

iteye_8101

最新推荐文章于 2024-09-14 09:30:00 发布

阅读量143

点赞数

分类专栏：开源框架文章标签： fckeditor .net PHP DOS HTML

开源框架专栏收录该内容

10 篇文章 0 订阅

订阅专栏

以前在弄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进行自定义工具栏的添加就算完成了。可以试一试哦，如果大家觉得好的话也顶一下和鼓励下咯~

另外，附件里已经是按照上面说的添加成功的的编辑器，大家可以试一试！