FckEditor工具栏添加自定义按钮，并实现点击按钮的功能

本文主要是介绍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工具栏添加自定义按钮，并实现点击按钮的功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---