FCKeditor使用笔记一----工具条修改

在项目中使用到网页编辑器，并作个性化开发，所以必须增加一个自己的命令控件。原来用的是eWebEditor的精简版4.6，后来项目组决定采用FCKEditor，以前没有使用过FCK，更别说更改了。经过一番搜索、下载和部署，终于能测试了。
周五下午和周一上午对FCKEditor代码的分析和测试，成功添加了一个自定义控件。下面把修改过程记录一下，供大家参考
1.工具条配置：
工具条的配置在fckeditor/fckconfig.js中。。


FCKConfig.ToolbarSets["Default"] = [
['Source','MIC','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks','-','About'] // No comma for the last row.
] ;
   代码中“[”中间为代码命令编号，“]”，每个[]之间都有一个分隔符，'-'是代表竖线。'/'代表换行。知道这些我们就可以自由排版了，甚至可以打乱原来的配置。在这段代码中，在'source'后面增加了自定义按钮MIC。

2.增加按钮定义：

js文件路径：/fckeditor/editor/js/fckeditorcode_gecko.js及/fckeditor/editor/js/fckeditorcode_ie.js，分别用于Mozilla及IE浏览器。

找到下面这段代码

var FCKCommands=FCK.Commands={};FCKCommands.LoadedCommands={};
FCKCommands.RegisterCommand=function(A,B){this.LoadedCommands[A]=B;};FCKCommands.GetCommand=function(A){var B=FCKCommands.LoadedCommands[A];if (B) return B;switch (A){case 'Bold':case 'Italic':case 'Underline':case 'StrikeThrough':case 'Subscript':case 'Superscript':B=new FCKCoreStyleCommand(A);break;case 'RemoveFormat':B=new FCKRemoveFormatCommand();break;case 'DocProps':B=new FCKDialogCommand('DocProps',FCKLang.DocProps,'dialog/fck_docprops.html',400,380,FCKCommands.GetFullPageState);break;

 在break;后面插入case 'MIC' :B=new FCKDialogCommand('DocProps',FCKLang.DocProps,'dialog/fck_docprops.html',400,380,FCKCommands.GetFullPageState);break;

后面命令，函数要实现Execute即getState()两个方法，可用内置dialog格式的，也可以自定义一个

 

同时也要设置一个按钮的定义

找到这段开头的代码

var FCKToolbarItems={};FCKToolbarItems.LoadedItems={};FCKToolbarItems.RegisterItem=function(A,B){this.LoadedItems[A]=B;};FCKToolbarItems.GetItem=function(A)

在最后也上上面一样加上

case 'MIC':B=new FCKToolbarButton('MIC',FCKLang.MIC,null,null,null,true,72);

FCKLang.MIC是按钮名称，定义在fckeditor/editor/lang/*.js

最后一个参数是图标，如果是数字，则调用fckeditor/editor/skin/所选的按钮样式中fck_strip.gif图片对应数字位置的图片，如果为null，则自动调用fckeditor/editor/skin/命令按钮小写.gif

 

通过上述方法可以再FCKEditor中自己排版按钮样式及添加命令按钮，添加按钮的对应的功能还需要自己填写。