FCK编辑器（FCKEditor）添加新按钮和功能的修改方法

在FCKeditor中加一个自定义按钮，看起来挺技术活，其实拆开一步步看，也就是几个配置文件的微调。你只需要准备好四个文件：fckconfig.js、zh-cn.js、en.js，以及专门处理浏览器内核的fckeditorcode_gecko.js（针对Firefox等非IE浏览器）或fckeditorcode_ie.js（针对IE）。如果想支持两种浏览器，那就两个包都改。

第一步：在Toolbar中添加功能按钮

打开fckconfig.js，找到FCKConfig.ToolbarSets["Default"]这一行，在数组里加上你想要的按钮名称。比如：

FCKConfig.ToolbarSets["Default"] = [
    ['Bold','Italic','-','About', 'mydiy']
] ;

这里mydiy就是你自己定义的按钮标识符，后面会用到。

第二步：为按钮添加中文名称和英文名称

要让按钮在界面上显示文字，得去语言文件里注册一下。中文版编辑zh-cn.js，加上：

mydiy : "我的自定义按钮"

英文版编辑en.js，加上：

mydiy:"mydiybutton"

这两个名称分别对应中英文界面下的按钮标签。

第三步：在Toolbar中显示该按钮

这一步是关键，需要修改fckeditorcode_gecko.js（或fckeditorcode_ie.js）。先找到类似这样的代码：

case 'NewPage':B=new FCKToolbarButton('NewPage',FCKLang.NewPage,null,null,true,null,4);break;

在break后面插入你自己的按钮代码，比如：

case 'mydiy':B=new FCKToolbarButton('mydiy',FCKLang.mydiy,null,null,false,true,50);

注意最后那个数字50是按钮的显示图片索引。如果你想让它显示成“插入图片”那个图标，把50改成37就行。这样按钮就出现在工具栏上了。

第四步：定义按钮功能原型

在同文件中继续查找：

var FCKNewPageCommand=function(){this.Name='NewPage';};
FCKNewPageCommand.prototype.Execute=function(){FCKUndo.Sa veUndoStep();FCK.SetHTML('');FCKUndo.Typing=true;};
FCKNewPageCommand.prototype.GetState=function(){return FCK_TRISTATE_OFF;};

在这段代码后面，添加你自己的功能定义。比如：

var FCKmydiyCommand=function(){this.Name='mydiy';};
FCKmydiyCommand.prototype.Execute=function(){ /* 这里写你需要执行的代码，例如 alert("I am here !"); */ };
FCKmydiyCommand.prototype.GetState=function(){return 0;};

这相当于给按钮绑定了一个“执行动作”，点击按钮就会触发Execute里的代码。

第五步：按钮功能实例化

继续在同一个文件中查找：

case 'NewPage':B=new FCKNewPageCommand();break;

在它后面加上：

case 'mydiy':B=new FCKmydiyCommand();break;

这一步把刚才定义的功能原型跟按钮名称关联起来，让按钮“活”起来。

完成以上五步，刷新编辑器，自定义按钮就能正常使用了。如果想给按钮加个快捷键，可以在fckconfig.js的FCKConfig.Keystrokes = []数组中添加一条，比如：

[ CTRL + 71 /*G*/, 'mydiy' ]

这样按下Ctrl+G就能直接触发你的按钮功能。