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”,就行了。