FCKEditor提供了强大功能.但有时根据业务要求,需要增加自己的工具栏按钮等等。
FCKEditor提供了插件机制,可以在对既有的代码不做修改,只需简单配置,即可扩展FCKEditor的功能。
下面用一个例子:在工具栏增加一个My_Find按钮,点击弹出一个对话框:
1.配置:
FCKEditor所有的配置都在fckconfig.js中设置.
a.配置工具栏:
如果我们要增加一个按钮,My_Find :
复制代码 代码如下:
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','Page
break'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['My_Find']
] ;
b.指定插件的位置:
复制代码 代码如下:
FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;
c.把我们的插件加入到插件列表中:
复制代码 代码如下:
FCKConfig.Plugins.Add( 'findreplace' , 'en,it,fr' ) ;
注意:findreplace是 FCKConfig.PluginsPath下真实的文件夹名 .en,it,fr为可支持的语言
2.相关文件:
在插件文件下至少需要fckplugin.js.
如果只是多语言的的话,还需要在 lang文件夹,每种语言建立一个独立的语言文件夹.
其它文件根据项目的需要了.
2.fckplugin.js
a.注册命令
复制代码 代码如下:
FCKCommands.RegisterCommand( 'My_Find' ,
new FCKDialogCommand( FCKLang['DlgMyFindTitle'] ,
FCKLang['DlgMyFindTitle'] ,
FCKConfig.PluginsPath + 'findreplace/find.html'
, 340, 170 ) ) ;
b.生成一个工具栏按钮,指定对应的图标
复制代码 代码如下:
var oFindItem = new FCKToolbarButton( 'My_Find' , FCKLang[ 'DlgMyFindTitle' ] ) ;
oFindItem.IconPath = FCKConfig.PluginsPath + 'findreplace/find.gif' ;
c.跟工具栏设置挂钩
复制代码 代码如下:
FCKToolbarItems.RegisterItem( 'My_Find', oFindItem ) ;
其中My_Find是配置文件ToolbarSets中指定的。