asp.net 為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控件并解壓，把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/editor/plugins/insertcode/images/insertcode.gif。

在FCKeditor/editor/plugins/insertcode/目錄下建立insertcode.aspx，注意，如果是用Visual Studio建立的話一定要單檔案，不要代碼分離方式。

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>InsertCode By Moozi.Net</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 ;

.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>

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

<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>

</form>

</body>

</html>

接下來修改FCKeditor/fckconfig.js，在原檔案中我們能找到// FCKConfig.Plugins.Add( 'autogrow' ) ;這段代碼，在這段代碼下一行插入：FCKConfig.Plugins.Add( 'insertcode' , 'zh-cn,en' ) ;

最後修改Web.config檔案：（請參考CodeHighlighter/Web.config）

在<configuration>裡插入：

</configSections>

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

</keywordCollection>

</keywordLinking>

</languages>

</codeHighlighter>

這次的插件就完工了。這種方法可以說是一勞永逸，以後更換高版本的FCKeditor時，隻需要修改fckconfig.js将這個插件加入就可以了

asp.net 為FCKeditor開發代碼高亮插件實作代碼

繼續閱讀

invalid byte 1 of 1-byte UTF-8 sequence

出現invalid byte 1 of 1-byte UTF-8 sequence問題

龍珠訓練營task04

趕工心得（一）

一個小小的移動web版音樂播放器

Docker - Dockerfile之ADD、COPY、WORKDIR、USER、EXPOSE指令詳解

為什麼要選擇UniDAC

Compile workrave under windows &ndash; My exprience 在Windows上編譯Workrave

門戶通專訪草根站長九天狼：做站貴在堅持

tabpanel 使用問題

SIP Presence SUBSCRIBE-NOTIFY

為什麼把CSS放頭部，script放下面

CSS之折疊菜單

QName是什麼

web開發之前後端渲染

403 Forbidden，You don't have permission to access / on this server.Forbidden