FCKeditor是一款功能强大的开源在线文本编辑器,刚刚推出的 FCKEditor 2.5 支持IE、Firefox、safari、Oper、Netscape、Camino等等主流浏览器，支持Windows、Mac、Linux平台，支持ASP.Net、ASP、ColdFusion 、PHP 、Java 、 Active-FoxPro、Lasso 、Perl 、Python等语言，生成的代码完全符合XHTML 1.0标准。

其配置方法可参见：http://www.xianfen.net/Article7.aspx

本文讨论 asp.net FCKEditor  中添加"插入代码"工具栏。代码高亮组件用的是免费的 ActiproSoftware.CodeHighlighter ，该组件支持多种语言代码的着色。


(一).添加自定义工具栏



涉及到三组文件：

1.fckeditor\editor\lang下的文件(这是界面多语言支持的文件夹，在此只修改英文和简体中文支持的.js文件)


en.js:

zh-cn.js:


2.fckeditor\editor\js下的文件(这是多浏览器支持的文件夹，FCKEditor 核心代码。为了减少大小，该文件夹的文件已被压缩，未被压缩的文件在"fckeditor\editor\_source"中。

fckeditorcode_gecko.js:提供"类火狐"等浏览器支持。

fckeditorcode_ie.js:提供"类IE"等浏览器支持。

以上文件共要改两处：

(1).在以上文件中查找"default:if (FCKRegexLib"，在default 前插入"case 'InsertCode':B = new FCKDialogCommand('InsertCode' ,FCKLang.InsertCode ,'dialog/InsertCode/InsertCode.aspx',700,600);break"

FCKDialogCommand()方法：

参数1,2:按钮名称，跟前面语言支持文件中定义的对应

参数3:点击该按钮后显示的文件

参数4,5:弹出窗口的宽和高

(2).继续查找"default:alert(FCKLang.UnknownToolbarItem"，在"default"前插入"case 'InsertCode':B = new FCKToolbarButton,'InsertCode', FCKLang.InsertCode,null,null,null,null,69);break;"

最后的参数是工具栏图标的索引(FCKEditor版本不同，索引不同)，图标文件fckeditor\editor\skins\office2003\fck_strip.gif,在图片的最后增加一个16*16的图标。索引计算方法是：该图片高度除16即得到最后一个图标索引号。

3.fckeditor\fckconfig.js



(二).制作InsertCode.aspx 文件(fckeditor\editor\dialog\InsertCode\InsertCode.aspx)



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


<%@ 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)

{

code = txtCode.Text;

Highlighter.LanguageKey = ddlLangType.SelectedItem.Text;

Highlighter.OutliningEnabled = chkOutLining.Checked;

Highlighter.LineNumberMarginVisible = chkLineNum.Checked;

Highlighter.Text = code;

}


protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

CodeHighlighterConfiguration config = ConfigurationManager.GetSection("codeHighlighter") as CodeHighlighterConfiguration;

string[] keys = new string[config.LanguageConfigs.Keys.Count];

config.LanguageConfigs.Keys.CopyTo(keys, 0);

Array.Sort(keys);

foreach (string key in keys)

{

ddlLangType.Items.Add(key);

}

ddlLangType.SelectedIndex = ddlLangType.Items.IndexOf(ddlLangType.Items.FindByText("C#"));

}

}


protected void Highlighter_PostRender(object sender, EventArgs e)

{

if(Highlighter.Output != null)

{

lblCode.Text = "<pre>" + Highlighter.Output.Replace("\n", "<br />") + "</pre>"; //FCKEditor 2.5 版本以下，在<pre>标记中的换行由设计视图转化为代码视图时有时会失效，因此将换行符换成<br />

//或者换成Highlighter.Output.Replace(" ", "&nbsp;&nbsp;").Replace("\n", "<br />") 把回车换成<br /> 双空格换成&nbsp;&nbsp;

Response.Write("<scr" + "ipt>window.parent.SetOkButton( true );</scr" + "ipt>"); //返回成功，显示"确定"按钮

}

}

</script>


<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>插入代码--飘遥的BLOG</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<meta content="noindex, nofollow" name="robots" />


<script src="../common/fck_dialog_common.js" type="text/javascript"></script>


<script type="text/javascript">


var oEditor = window.parent.InnerDialogLoaded() ;


// Gets the document DOM

var oDOM = oEditor.FCK.EditorDocument ;


var oActiveEl = oEditor.FCKSelection.GetSelectedElement() ;


window.onload = function()

{

//window.parent.SetOkButton( true );

}


function Ok()

{

if(GetE('txtCode').value == '')

{

alert("代码内容不能为空！");

return false;

}

oEditor.FCK.InsertHtml( document.getElementById("lblCode").innerHTML ) ;

return true ;

}


</script>


<style type="text/css">

.langType

{

padding-bottom:5px;

}

.btnRun

{

padding-top:5px;

text-align:right;

}

PRE {

background-color: #FFFEF8;

border-style: solid;

border-width: 1px;

border-color: #C0C0C0;

font-family: Courier New, monospace;

font-size: 10pt;

}

</style>

</head>

<body>

<form id="form1" runat="server">

<div>

<div class="langType">

语言类型：<asp:DropDownList ID="ddlLangType" runat="server">

</asp:DropDownList></div>

<div class="textCode">

<asp:TextBox ID="txtCode" runat="server" TextMode="multiline" Width="665px" Height="390px"></asp:TextBox>

</div>

<div class="btnRun">

<asp:CheckBox ID="chkOutLining" Text="折叠代码" runat="server" Checked="true" />

<asp:CheckBox ID="chkLineNum" Text="允许行号" runat="server" Checked="true" />

<asp:Button ID="btnSubmit" runat="server" Text=" 转 换 " OnClick="btnSubmit_Click" />

<pre id="pre1" style="display: none;">

<CH:CodeHighlighter runat="server" ID="Highlighter" OnPostRender="Highlighter_PostRender" /></pre>

<asp:Label ID="lblCode" style="display:none;" runat="server"></asp:Label>

</div>

</div>

</form>

</body>

</html>


(三).配置CodeHighlighter组件

可根据CodeHighlighter文档配置，不再多说。 <?xml version="1.0"?>

<configuration>

<configSections>

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

</configSections>

<appSettings>

<add key="FCKeditor:UserFilesPath" value="/Files/"/>

</appSettings>

<system.web>

<pages validateRequest="false" enableEventValidation="false"/>

<compilation debug="true"/>

</system.web>

<codeHighlighter>

<cache languageTimeout="3"/>

<keywordLinking enabled="true" target="_blank" defaultKeywordCollectionKey="ActiproKeywords">

<keywordCollection key="ActiproKeywords">

<explicitKeyword tokenKey="IdentifierToken" patternValue="Zxjay" url="http://www.xianfen.net" caseSensitive="false"/>

</keywordCollection>

</keywordLinking>

<languages>

<language key="Assembly" definitionPath="~/Languages/Lexers/ActiproSoftware.Assembly.xml"/>

<language key="BatchFile" definitionPath="~/Languages/Lexers/ActiproSoftware.BatchFile.xml"/>

<language key="C#" definitionPath="~/Languages/Lexers/ActiproSoftware.CSharp.xml"/>

<language key="CSS" definitionPath="~/Languages/Lexers/ActiproSoftware.CSS.xml"/>

<language key="HTML" definitionPath="~/Languages/Lexers/ActiproSoftware.HTML.xml"/>

<language key="INIFile" definitionPath="~/Languages/Lexers/ActiproSoftware.INIFile.xml"/>

<language key="Java" definitionPath="~/Languages/Lexers/ActiproSoftware.Java.xml"/>

<language key="JScript" definitionPath="~/Languages/Lexers/ActiproSoftware.JScript.xml"/>

<language key="Lua" definitionPath="~/Languages/Lexers/ActiproSoftware.Lua.xml"/>

<language key="MSIL" definitionPath="~/Languages/Lexers/ActiproSoftware.MSIL.xml"/>

<language key="Pascal" definitionPath="~/Languages/Lexers/ActiproSoftware.Pascal.xml"/>

<language key="Perl" definitionPath="~/Languages/Lexers/ActiproSoftware.Perl.xml"/>

<language key="PHP" definitionPath="~/Languages/Lexers/ActiproSoftware.PHP.xml"/>

<language key="PowerShell" definitionPath="~/Languages/Lexers/ActiproSoftware.PowerShell.xml"/>

<language key="Python" definitionPath="~/Languages/Lexers/ActiproSoftware.Python.xml"/>

<language key="SQL" definitionPath="~/Languages/Lexers/ActiproSoftware.SQL.xml"/>

<language key="VB.NET" definitionPath="~/Languages/Lexers/ActiproSoftware.VBDotNet.xml"/>

<language key="VBScript" definitionPath="~/Languages/Lexers/ActiproSoftware.VBScript.xml"/>

<language key="XAML" definitionPath="~/Languages/Lexers/ActiproSoftware.XAML.xml"/>

<language key="XML" definitionPath="~/Languages/Lexers/ActiproSoftware.XML.xml"/>

</languages>

<lineNumberMargin foreColor="Teal" paddingCharacter=" " visible="true"/>

<outlining enabled="true" imagesPath="~/Images/OutliningIndicators/"/>

<spacesInTabs count="4"/>

</codeHighlighter>

</configuration>

如果其他语言，可参考使用 javascript 代码着色: