本文主要是介绍FckEditor工具栏添加自定义按钮，并实现点击按钮的功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
由于前几天，项目中需要在fckeditor编辑器中，将别的网站中的新闻复制进来的时候，里面的图片存储在这些网站的服务器上，需要将这些外部图片下载下来，然后存放在我们自己的服务器上，然后替换这些外部图片地址。
这里就需要在fckeditor编辑器中添加一个自定义的按钮，并实现该按钮的功能：下载和上传到我们自己的服务器。
需要修改的文件包括：
fckconfig.js 、zh-cn.js、fckeditorcode_gecko.js（非IE浏览器）或者fckeditorcode_ie.js（IE浏览器）
步骤：
1、定义按钮
在Toolbar中添加新的功能按钮，需要在ToolbarSets中添加我们按钮的名称，我们定义按钮名称为TransExternalImg
fckconfig.js：FCKConfig.ToolbarSets[“content”]中添加按钮名称(这个content是我们项目中使用的工具栏，跟default，basic中的类似)
FCKConfig.ToolbarSets["Content"] = [
.......
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor','FitWindow','TransExternalImg']
] ;
2、定义按钮的中文名字
在zh_cn.js文件中添加：
var FCKLang =
{
ToolbarCollapse : "折叠工具栏",
ToolbarExpand : "展开工具栏",
// Toolbar Items and Context Menu
Save : "保存",
ransExternalImg : "转换外部图片资源",
}
这样当我们把鼠标移到工具栏的这个按钮时，会显示该按钮的中文名称
3、将按钮注册到toolbar
需要在fckeditorcode_gecko.js中注册该按钮到工具栏：
查找：
case 'NewPage':
B = new FCKToolbarButton('NewPage', FCKLang.NewPage, null, null, true, null, 4);
break;
在后面插入
case 'TransExternalImg':
B=new FCKToolbarButton('TransExternalImg',FCKLang.TransExternalImg,null,null,false,true,44);
break;
最后面的参数数字表示的是按钮显示的样子，你可以替换成其他数字。 这样就可以在工具栏中中显示定义的按钮了。
4、按钮功能实例化
修改ckeditorcode_gecko.js：
查找
case 'NewPage':
B = new FCKNewPageCommand();
break;
在后面加：
case 'TransExternalImg':
B=new FCKTransExternalImgCommand();
break;
5、实现按钮点击的事件功能
ckeditorcode_gecko.js：
查找：
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 FCKTransExternalImgCommand=function(){
this.Name='TransExternalImg';
};
FCKTransExternalImgCommand.prototype.Execute=function()
{
//这里可以定义自己的功能，比如
alert("测试");
};
FCKTransExternalImgCommand.prototype.GetState=function(){return 0;};
这样就能在我们的工具栏中显示了。
这篇关于FckEditor工具栏添加自定义按钮，并实现点击按钮的功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
