FCKEditor 添加"插入代码"工具栏按钮

 

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 代码着色:
http://www.cnblogs.com/zss1100/archive/2007/06/17/786773.html

完整示例下载：点击下载