快捷導(dǎo)航

asp.net 為FCKeditor開發(fā)代碼高亮插件實現(xiàn)代碼

更新時間：2008年08月15日 19:38:07 作者：

昨天已經(jīng)將BlogEngine的可視化編輯器換成了FCKeditor，作為一個程序員，在博客中插入代碼是很重要的一塊。網(wǎng)上現(xiàn)有的都是修改FCKeditor的fckeditorcode_gecko.js和fckeditorcode_ie.js以達到InsertCode的目的。這個方法非常麻煩，當(dāng)要使用FCKeditor新版本時都要重新修改這兩個文件，非常影響我們的效率。

所以就為FCKeditor寫了個InsertCode的插件。整個插件的制作過程非常簡單：
FCKeditor插件開發(fā)請參考FCKeditor官網(wǎng)的文檔：

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

復(fù)制代碼代碼如下:

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目錄下創(chuàng)建images，lang，languages目錄，在lang目錄下新建en.js,zh-cn.js。en.js的內(nèi)容為：
FCKLang.InsertCode = 'Insert Codes' ;
zh-cn.js的內(nèi)容為：
FCKLang.InsertCode = '插入代碼' ;
下載CodeHighlighter http://m.fzitv.net/codes/94.html
控件并解壓，把CodeHighlighter/bin目錄下的ActiproSoftware.CodeHighlighter.Net20.dll,ActiproSoftware.Shared.Net20.dll,CodeHighlighterTest.dll三個DLL復(fù)制到BlogEngine.Web/bin目錄，
將CodeHighlighter/Languages里的Lexers整個目錄復(fù)制到FCKeditor/editor/plugins/insertcode/languages目錄，
將CodeHighlighter/Images/OutliningIndicators/目錄下的所有圖片復(fù)制到FCKeditor/editor/plugins/insertcode/images目錄，并將這個圖片下載保存到FCKeditor/editor/plugins/insertcode/images/insertcode.gif。

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

insertcode.aspx內(nèi)容如下：

復(fù)制代碼代碼如下:

<%@ 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) 
...{ 
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(" ", "&nbsp;&nbsp;").Replace("\n", "<br />"); 
Response.Write("<scr" + "ipt>window.parent.SetOkButton( true );</scr" + "ipt>"); 
} 
} 
</script> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>InsertCode By Moozi.Net</title> 

<script src="http://www.cnblogs.com/dialog/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( false ); 
} 

function Ok() 
...{ 
if(GetE('txtCode').value == '') 
...{ 
alert("代碼內(nèi)容不能為空！"); 
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: #f4f4f4; 
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> 
<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> 
<div class="btnRun"> 
<asp:Button ID="btnSubmit" runat="server" Text=" 轉(zhuǎn) 換 " OnClick="btnSubmit_Click" /> 
<pre id="pre1" style="display: none;"> 
<CH:CodeHighlighter runat="server" ID="Highlighter" OnPostRender="CodeHighlighter_PostRender" /> 
</pre> 
<asp:Label ID="lblCode" Style="display: none;" runat="server"></asp:Label> 
</div> 
</div> 
</form> 
</body> 
</html>

接下來修改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將這個插件加入就可以了

您可能感興趣的文章: