首頁 > 開發者 > ASP

asp.net 為FCKeditor開發代碼高亮外掛程式實現代碼

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

所以就為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 http://www.jb51.net/codes/94.html
控制項並解壓，把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">

<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(" ", " ").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("代碼內容不可為空！");
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=" 轉 換 " 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將這個外掛程式加入就可以了

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關文章
反爬蟲：利用ASP.NET MVC的Filter和緩衝（入坑出坑）
ASP.NET Core 2.0利用MassTransit整合RabbitMQ
實戰中的asp.net core結合Consul叢集&Docker實現服務治理
asp DateDiff實現文字在特定時間後消失
設定和讀取ASP.Net全域變數的方法

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More