（在说正事之前，我要推荐一个福利：你还在原价购买阿里云、腾讯云、华为云服务器吗？那太亏啦！来这里，新购、升级、续费都打折，能够为您省60%的钱呢！2核4G企业级云服务器低至69元/年，点击进去看看吧>>>)
需要修改的文件：

fckconfig.js
zh-cn.js
en.js
fckeditorcode_gecko.js || fckeditorcode_ie.js（针对IE以外的浏览器||针对ie浏览器，如果要支持两种浏览器，就这两个包都修改）

第一步：在Toolbar中添加功能按钮
fckconfig.js：FCKConfig.ToolbarSets[“Default”] 中添加按钮名称
FCKConfig.ToolbarSets["Default"] = [
['Bold','Italic','-','About', '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是按钮的显示图片，要让你的自定义按钮显示为插入图片那个按钮的图片，可以填入37)
这样就可以在Toolbar中显示你的按钮了

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

ckeditorcode_gecko.js（fckeditorcode_ie.js）：

查找：

var FCKNewPageCommand=function(){this.Name='NewPage';};
FCKNewPageCommand.prototype.Execute=function(){FCKUndo.SaveUndoStep();FCK.SetHTML('');FCKUndo.Typing=true;};
FCKNewPageCommand.prototype.GetState=function(){return FCK_TRISTATE_OFF;};
定义功能原型：（这里直接复NewPage的实现代码放到后面，然后进行修改）

比如：var FCKmydiyCommand=function(){this.Name='mydiy';};FCKmydiyCommand.prototype.Execute=function(){ 这里写你所需要执行的代码或者函数，比如alert("I am here !");};FCKmydiyCommand.prototype.GetState=function(){return 0;};
将上面代码插入到查找内容之后。

第五步：按钮功能实例化：

ckeditorcode_gecko.js（fckeditorcode_ie.js）：

查找：

case 'NewPage':B=new FCKNewPageCommand();break;
功能实例化：
case 'mydiy':B=new FCKmydiyCommand();break;
将上面代码插入到查找内容之后。

OK，这样就可以在为FCKeditor加上自定义的按钮了。

如果要为按钮加上快捷键，可以在fckconfig.js中：FCKConfig.Keystrokes = []加上
[ CTRL + 71 /*G*/, 'mydiy' ],

来自：萍客小居 （http://www.piikee.net/）

版权声明：本文转载自网络，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的，如有侵权请联系QQ/微信：153890879删除

相关文章

• 

  四两拨千斤——你不知道的VScode编码Ty

• 

  我是如何在 Vue 项目中做代码分割的

• 

  position:sticky 粘性定位的几种巧妙应

• 

  从零到一搭建React组件库