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”] 中添加按钮名称
      
  1. FCKConfig.ToolbarSets["Basic"] = [  
  2.     ['Bold','Italic','-','About', 'Test']  
  3. ] ; 

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

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

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

Step 3:在Toolbar中显示该按钮

      fckeditorcode_gecko.js:(这个JS的代码经过压缩,可以使用工具格式化再进行修改)

      查找:

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

       在break后插入你的代码
      
  1. case 'Test':B=new FCKToolbarButton('Test',FCKLang.Test,null,null,true,null,50);break; 

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

Step 4:定义按钮功能原型
   
    ckeditorcode_gecko.js:

    查找:

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

   
    定义功能原型:(这里直接复NewPage的实现代码,可修改成自已的)

  1. var FCKTestCommand=function(){this.Name='NewPage';};  
  2. FCKTestCommand.prototype.Execute=function(){function(){FCKUndo.SaveUndoStep();FCK.SetHTML('');FCKUndo.Typing=true;};
  3. FCKNewPageCommand.prototype.GetState=function(){return FCK_TRISTATE_OFF;}; 
   
    将上面代码搜入到查找内容之后。

Step 5:按钮功能实例化:

    ckeditorcode_gecko.js:
   
    查找:

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

    功能实例化:

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

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


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


 
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值