您的位置： >> 首页 >> .Net视角 >> 使用CodeHighlighter为FCKEditor制作代码着色高亮插件

C# 视角

>>更多

ASP.Net 视角

使用CodeHighlighter为FCKEditor制作代码着色高亮插件

2009-09-09 来自：CS程序员之窗字体大小：【大中小】

摘要：FCKeditor是个很不错的在线编辑器，美中不足的是缺少代码着色高亮显示功能。笔者了参考网上资料并结合自己的实践，给大家描述如何使用CodeHighlighter为FCKEditor制作代码着色高亮插件，以给网友们作为参考

文章内容

源码下载

示例说明

帮助说明

版本列表

        FCKeditor是个很不错的在线编辑器，美中不足的是缺少代码着色高亮显示功能。对于代码高亮着色，网上介绍有Google的SyntaxHighlighter 和actipro 的 CodeHighlighter。

        考虑到SyntaxHighlighter在显示页面中需要做一些操作，感觉不甚方便。于是选择使用CodeHighlighter作为FCKeditor的代码着色插件。其实网上也有这方面的介绍，而笔者也是参考网上并结合自己的实践将自己的操作过程逐一记录，以便于网友参考实践。

        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 + 'code.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控件并解压，把CodeHighlighter/bin目录下的 ActiproSoftware.CodeHighlighter.Net20.dll,
ActiproSoftware.Shared.Net20.dll,
CodeHighlighterTest.dll
        三个DLL复制到自己项目的/bin目录，

       将CodeHighlighter/Languages里的Lexers整个目录复制到FCKeditor/editor/plugins/insertcode/languages目录，
将CodeHighlighter/Images/OutliningIndicators/目录下的所有图片复制到FCKeditor/editor/plugins/insertcode/images目录，并将附件列表中的code.gif这个图片下载保存到FCKeditor/editor/plugins/insertcode/。

第四步：

在FCKeditor/editor/plugins/insertcode/目录下新建insertcode.aspx，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">

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 (!Page.IsPostBack)

{

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

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 CodeHighlighter_PostRender(object sender, EventArgs e)

{

if (!string.IsNullOrEmpty(Highlighter.Output))

{

lblCode.Text = Highlighter.Output.Replace(" ", " ").Replace("\n", "<br />");

Response.Write("<scr" + "ipt>window.parent.SetOkButton( true );</scr" + "ipt>");

}

</script>

<title>插入脚本代码</title>

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( false );

}

function Ok()

{

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

{

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

return false;

}

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

return true ;

}

</script>

.langType

{

padding-bottom: 5px;

}

.btnRun

{

padding-top: 5px;

text-align: right;

}

pre

{

background-color: #f4f4f4;

border-style: solid;

border-width: 1px;

border-color: #C0C0C0;

font-family: Courier New, monospace;

font-size: 10pt;

}

</style>

</head>

<body>

<div>

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

</asp:DropDownList>

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

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

</div>

<div>

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

</div>

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

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

</pre>

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

</div>

</form>

</body>

</html>

第五步：

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

FCKConfig.Plugins.Add( 'insertcode' , 'zh-cn' ) ;

并在

FCKConfig.ToolbarSets["Default"]

中增加一项：'InsertCode' 如下面所示范

FCKConfig.ToolbarSets["Default"] = [

['Source','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','InsertCode'],

['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],

'/',

['Style','FontFormat','FontName','FontSize'],

['TextColor','BGColor'],

['FitWindow','ShowBlocks','-','About'] // No comma for the last row.

] ;

第六步：

最后修改Web.config文件：（请参考CodeHighlighter/Web.config）

在<configuration>里插入：

</configSections>

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

</keywordCollection>

</keywordLinking>

</languages>

</codeHighlighter>

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

作者：黑浪

[返回顶部]

上一篇：HtmlInputFile的改进：打造图片上传.. 下一篇：用户自定义PDF浏览控件（无需Acrobat..

打印页面收藏文章关闭

该文章已有0条评论我要发表评论

序号	附件标题
1	CodeHighlighter.zip
2	code.gif

文章ID	标题	录入时间
2421	使用CodeHighlighter为FCKEditor制作代码着色高..	2009年09月09日