FCKEditor插件的开发指南

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','PageBreak'],  
        '/',  
        ['Style','FontFormat','FontName','FontSize'],  
        ['TextColor','BGColor'],  
        ['My_Find']  
    ] ;   

 

b.指定插件的位置:  

1. FCKConfig.PluginsPath = FCKConfig.BasePath +  'plugins/'  ;  

c.把我们的插件加入到插件列表中:  

1. 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.生成一个工具栏按钮,指定对应的图标 

1. var  oFindItem       =  new  FCKToolbarButton(  'My_Find' , FCKLang[ 'DlgMyFindTitle' ] ) ;  
2. oFindItem.IconPath  = FCKConfig.PluginsPath + 'findreplace/find.gif'  ;  

c.跟工具栏设置挂钩  

1. FCKToolbarItems.RegisterItem( 'My_Find', oFindItem ) ;           
   

其中My_Find是配置文件 ToolbarSets 中指定的