为FCKeditor开发代码高亮插件

昨天已经将BlogEngine的可视化编辑器换成了FCKeditor，作为一个程序员，在博客中插入代码是很重要的一块。网上现有的都是修改FCKeditor的fckeditorcode_gecko.js和fckeditorcode_ie.js以达到InsertCode的目的。这个方法非常麻烦，当要使用FCKeditor新版本时都要重新修改这两个文件，非常影响我们的效率。所以就为FCKeditor写了个InsertCode的插件。整个插件的制作过程非常简单：

FCKeditor插件开发请参考FCKeditor官网的文档：

http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/Customization/Plug-ins
首先，我们在FCKeditor/editor/plugins目录下新建一个insertcode目录，并在insertcode目录下新建一个fckplugin.js文件。
在新建的fckplugin.js文件中插入下面的代码：

//插入代码 
FCKCommands.RegisterCommand('InsertCode', new FCKDialogCommand('InsertCode', FCKLang.InsertCode, FCKPlugins.Items['insertcode'].Path + 'insertcode.aspx', 700, 600)) ; 
var insertcodeItem = new FCKToolbarButton('InsertCode', FCKLang['InsertCode']) ; 
insertcodeItem.IconPath = FCKPlugins.Items['insertcode'].Path + 'images/insertcode.gif'; 
FCKToolbarItems.RegisterItem('InsertCode', insertcodeItem);
 

在FCKeditor/editor/plugins/insertcode目录下创建images，lang，languages目录，在lang目录下新建en.js,zh-cn.js。en.js的内容为：
FCKLang.InsertCode = 'Insert Codes' ;
zh-cn.js的内容为：
FCKLang.InsertCode = '插入代码' ;
下载CodeHighlighter（http://www.actiprosoftware.com/Download/Freeware.aspx?ProductGroupKey=CH）控件并解压，把CodeHighlighter/bin目录下的ActiproSoftware.CodeHighlighter.Net20.dll,ActiproSoftware.Shared.Net20.dll,CodeHighlighterTest.dll三个DLL复制到BlogEngine.Web/bin目录，
将CodeHighlighter/Languages里的Lexers整个目录复制到FCKeditor/editor/plugins/insertcode/languages目录，
将CodeHighlighter/Images/OutliningIndicators/目录下的所有图片复制到FCKeditor/editor/plugins/insertcode/images目录，并将为FCKeditor开发代码高亮插件这个图片下载保存到FCKeditor/editor/plugins/insertcode/images/insertcode.gif。

在FCKeditor/editor/plugins/insertcode/目录下新建insertcode.aspx，注意，如果是用Visual Studio新建的话

为FCKeditor开发代码高亮插件

insertcode.aspx内容如下：

<%@ Page Language="C#" ValidateRequest="false" %> 

<%@ Register TagPrefix="CH" Namespace="ActiproSoftware.CodeHighlighter" Assembly="ActiproSoftware.CodeHighlighter.Net20" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<script runat="server"> 
    static string code = string.Empty; 

    protected void btnSubmit_Click(object sender, EventArgs e)

接下来修改FCKeditor/fckconfig.js，在原文件中我们能找到// FCKConfig.Plugins.Add( 'autogrow' ) ;这段代码，在这段代码下一行插入：FCKConfig.Plugins.Add( 'insertcode' , 'zh-cn,en' ) ;

最后修改Web.config文件：（请参考CodeHighlighter/Web.config）
在<configuration>里插入：

<configSections> 
    <section name="codeHighlighter" requirePermission="false" type="ActiproSoftware.CodeHighlighter.CodeHighlighterConfigurationSectionHandler, ActiproSoftware.CodeHighlighter.Net20" /> 
</configSections>
 

在<system.web></system.web>后插入：

<codeHighlighter> 
  <cache languageTimeout="3" /> 
  <keywordLinking enabled="true" target="_blank" defaultKeywordCollectionKey="ActiproKeywords"> 
    <keywordCollection key="ActiproKeywords"> 
      <explicitKeyword tokenKey="IdentifierToken" patternValue="Actipro" url="http://www.actiprosoftware.com" caseSensitive="false" /> 
      <explicitKeyword tokenKey="IdentifierToken" patternValue="CodeHighlighter" url="http://www.codehighlighter.com" caseSensitive="false" /> 
    </keywordCollection> 
  </keywordLinking> 
  <languages> 
    <language key="Assembly" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.Assembly.xml" /> 
    <language key="BatchFile" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.BatchFile.xml" /> 
    <language key="C#" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.CSharp.xml" /> 
    <language key="CSS" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.CSS.xml" /> 
    <language key="HTML" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.HTML.xml" /> 
    <language key="INIFile" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.INIFile.xml" /> 
    <language key="Java" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.Java.xml" /> 
    <language key="JScript" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.JScript.xml" /> 
    <language key="Lua" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.Lua.xml" /> 
    <language key="MSIL" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.MSIL.xml" /> 
    <language key="Pascal" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.Pascal.xml" /> 
    <language key="Perl" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.Perl.xml" /> 
    <language key="PHP" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.PHP.xml" /> 
    <language key="PowerShell" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.PowerShell.xml" /> 
    <language key="Python" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.Python.xml" /> 
    <language key="SQL" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.SQL.xml" /> 
    <language key="VB.NET" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.VBDotNet.xml" /> 
    <language key="VBScript" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.VBScript.xml" /> 
    <language key="XAML" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.XAML.xml" /> 
    <language key="XML" definitionPath="~/fckeditor/editor/plugins/insertcode/languages/lexers/ActiproSoftware.XML.xml" /> 
  </languages> 
  <lineNumberMargin foreColor="Teal" paddingCharacter=" " visible="true" /> 
  <outlining enabled="true" imagesPath="~/fckeditor/editor/plugins/insertcode/images/" /> 
  <spacesInTabs count="4" /> 
</codeHighlighter>
 

这次的插件就完工了。这种方法可以说是一劳永逸，以后更换高版本的FCKeditor时，只需要修改fckconfig.js将这个插件加入就可以了为FCKeditor开发代码高亮插件