Fckeditor增加工具条button

  fckeditor支持自定义菜单。在fckconfig.js中加入FCKConfig.ToolbarSets["XXXXX"]就可以了,这里不详细说明。

  但现在需要在工具条中增加一个button。功能是切换多功能工具条和精简工具条的。这个工具以插件的形式进行开发,下面简述一下:

  fckeditor的插件都放在editor/pulgins目录下。在fck源码中已经带了几个插件,可供参考。

  以本次修改为例,总结一下添加插件的步骤:

  1.在editor/pulgins目录下新建toolbarswitch目录。并在toolbarswitch上下新建lang目录和fckplugin.js文件。

  fckplugin.js内容如下:

//注册命令,RegisterCommand(命令名,命令)
FCKCommands.RegisterCommand('More_Tool',new FCKToolBarSwitchCommand(true));
FCKCommands.RegisterCommand('Less_Tool',new FCKToolBarSwitchCommand(false)) ;

//创建工具栏按钮,现创建,再注册。
var oFindItem = new FCKToolbarButton('More_Tool',  FCKLang['MoreToolInfo']);
oFindItem.IconPath = FCKConfig.PluginsPath + 'toolbarswitch/more.png' ;
FCKToolbarItems.RegisterItem( 'More_Tool', oFindItem ) ;

var oreplaceItem = new FCKToolbarButton( 'Less_Tool', FCKLang['LessToolInfo']);
oreplaceItem.IconPath = FCKConfig.PluginsPath + 'toolbarswitch/less.png';
FCKToolbarItems.RegisterItem('Less_Tool', oreplaceItem);
FCKLang['MoreToolInfo']是这个button的标签名称,可以lang目录下创建相应的js文件,如en.js,可参考源码lang目录下的文件。

  2.上述插件创建了新的命令FCKToolBarSwitchCommand。这时需要在fck_othercommands.js添加如下内容并把它压缩更改到fckeditorcode_XXX.js中。

var FCKToolBarSwitchCommand = function(showMore) {
    this.showMore = showMore;
};
FCKToolBarSwitchCommand.prototype.Execute = function() {
    if (this.showMore)
        FCK.ToolbarSet.Load("Advance");
    else
        FCK.ToolbarSet.Load("Basic");
};
FCKToolBarSwitchCommand.prototype.GetState = function() {
    if (FCK.EditMode != FCK_EDITMODE_WYSIWYG)
        return FCK_TRISTATE_DISABLED;
    return FCK_EDITMODE_WYSIWYG
};

  也可以将上面写死的工具条通过参数的方法,使它可配置。

  3.在fckconfig.js中加入如下,启用这个插件。

FCKConfig.Plugins.Add( 'toolbarswitch', 'en,zh' ) ;

  4.最后在相应的工具条配置中加入“More_Tool”或“Less_Tool”,就行了。

posted @ 2012-07-25 19:05  zhangchaozheng  阅读(269)  评论(0编辑  收藏  举报