FCKeditor添加自定义按钮

最近项目需要对已有的FCKeditor添加新的功能，以前的做法只是在外壳处再次封装，这次看样子要进行全面改造了。

需要修改的文件：

1. fckconfig.js
2. zh-cn.js
3. fckeditorcode_gecko.js || fckeditorcode_ie.js（这里针对gecko的浏览器，ie的相同）

Step 1：在Toolbar中添加功能按钮

        fckconfig.js：FCKConfig.ToolbarSets[“Basic”] 中添加按钮名称
      

FCKConfig.ToolbarSets["Basic"] = [
    ['Bold','Italic','-','About', 'Test']
] ;

Step 2：为按钮添加中文名称

    zh-cn.js：为你的按钮起个名字

DlgAboutInfo        : "要获得更多信息请访问 ",
Test                : "测试"

Step 3：在Toolbar中显示该按钮

      fckeditorcode_gecko.js：（这个JS的代码经过压缩，可以使用工具格式化再进行修改）

      查找：

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

       在break后插入你的代码
      

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

 
        这样就可以在Toolbar中显示你的按钮了

Step 4：定义按钮功能原型
   
    ckeditorcode_gecko.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 FCKTestCommand=function(){this.Name='NewPage';};
FCKTestCommand.prototype.Execute=function(){function(){FCKUndo.SaveUndoStep();FCK.SetHTML('');FCKUndo.Typing=true;};
FCKNewPageCommand.prototype.GetState=function(){return FCK_TRISTATE_OFF;};

   
    将上面代码搜入到查找内容之后。

Step 5：按钮功能实例化：

    ckeditorcode_gecko.js：
   
    查找：

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

    功能实例化：

case 'Test':B=new FCKTestCommand();break;

    将上面代码搜入到查找内容之后。


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

分享到：

Hibernate的缓存机制介绍 | 注册表修改

• 2007-05-23 15:19
• 浏览 7420
• 评论(2)
• 查看更多

评论

2 楼 fishliuyi 2008-05-08  

引用

  fckeditorcode_gecko.js：（这个JS的代码经过压缩，可以使用工具格式化再进行修改）

在网站上下载的格式化工具,fck不能正常运行

1 楼 wangzicool 2007-06-19  

不错``