FCKEditor自定义工具栏按钮

项目需求要对FCKEditor进行修改，简化工具栏按钮，还有自定义工具栏按钮

一、简化工具栏按钮

    修改fckconfig.js文件中的FCKConfig.ToolbarSets["Default"]属性，在这个属性中，直接将要简化的功能按钮删除或者注视掉就OK，其他文件则不需要再修改，如果以后又需要这些功能，也可以直接再加上就可以使用。

二、自定义工具栏按钮

  在工具栏中新添加按钮，总共分三步（本人总结，非官方）：1、定义按钮 2、将按钮注册到工具栏 3、对按钮写事件（即要执行啥操作），下面就以这三个步骤对自定义工具栏以及事件编写进行一下介绍

 

  1>、首先修改fckconfig.js文件中的FCKConfig.ToolbarSets["Default"]属性，对要添加的按钮起一个英文的名字，在属性中添加，注意中间要以逗号隔开，然后修改en.js和zh-cn.js两个文件，在FCKLang属性中添加按钮信息，比如，在支持英文的en.js文件中添加Sign:'Sign'，在支持中文的zh-cn.js文件中添加Sign:'签名'，其中Sign就是我们要添加的按钮的名称，而签名就是我们放在这个按钮上的时候显示的提示信息，比如这个就是个签名按钮。

  2>、以上定义完按钮之后，第二步就是将按钮注册到工具栏当中。

      修改fckeditorcode_gecko.js和fckeditorcode_ie.js两个文件，其中gecko支持firefox之类、ie是支持IE浏览器的js文件。虽然这两个文件支持浏览器不同，但是基本修改的时候其实都差不多，所以一下步骤所要修改的地方，基本上都一样，所以两个文件合做一个来说。

                在这两个文件当中搜索InsertHorizontalRule，按照前面的规则，添加定义的按钮名称如Sign，中间以竖杠隔开，然后搜索case 'NewPage':B=new FCKNewPageCommand();break;在这之后添加case'Sign':B=new FCKSignCommand('Sign',FCKLang.Sign,null,null,true,null,67);break;其中的67就是我们这个自定义的按钮上要显示的图片在fck自带图片库中的序列

 

 

 

然后搜索default:if (FCKRegexL，在这串只前添加case 'Sign':B=new FCKToolbarButton('Sign',FCKLang.Sign,null,null,false,true,67);到此按钮注册完成，下面是对此按钮注册事件

在此文件中搜索var FCKNewPageCommand=function(){this.Name='NewPage';};FCKNewPageCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();FCK.SetData('');FCKUndo.Typing=true;FCK.Focus();};FCKNewPageCommand.prototype.GetState=function(){return 0;};在这个在的后面添加

var FCKSignCommand=function(){this.Name='Sign';};FCKSignCommand.prototype.Execute=function(){getUserSign()};FCKSignCommand.prototype.GetState=function(){return 0;};

其中getUserSign()就是本例中要执行操作的方法名

    3>、对功能事件编写代码（即编写getUserSign()方法）

function getUserSign(){ str={"sign":"1"}; $.ajax({ url:"http://localhost:80/sysNews/queryUserSign.action", dataType:"json", type:"post", data:str, success:function(data){ FCKUndo.SaveUndoStep();var oImg = FCK.InsertElement( 'img' ) ;oImg.src = "http://localhost:80/common/fckeditor/editor/images/userSigns/"+data.sign+".gif" ; } }); }

 由于在js文件当中无法直接获取从系统传来的参数，所以我们使用了一个jquery的ajax异步请求，从系统中获取用户登录名，然后在写死的路径当中寻找匹配的图片进行添加

在js文件中同样无法直接加载jquery的js库，所以我们使用

 

var oHead = document.getElementsByTagName('HEAD').item(0); var oScript= document.createElement("script"); oScript.type = "text/javascript"; oScript.src="jquery-1.4.2.js";

 来进行jquery的添加，至此功能开发完毕，刷新页面，在FCKEditor页面应该多了一个按钮，将鼠标放上去会提示“签名”，点击会自动获取当前登录人的信息，然后将匹配签名图片添加到FCKEditor编辑器中

-------以上仅为本人本例开发过程，非官方