当前位置: 首页 > 图文教程 > 网络编程 > 网页编辑器 > asp.net 为FCKeditor开发代码高亮插件实现代码

网页编辑器
DISCUZ论坛的UBB编辑器(增加灵活调用,支持ASP)
一款垃圾中的极品HTML编辑器(兼容IE OR FF)
一个Javascript 编写的代码编辑器
TinyMce 中文手册 在线手册与下载
eWebEditor_v280_Free_Final最好用的网页编辑器下载
新浪博客在线编辑器傻瓜调用版(2007.11.1第四次修正)提供下载了
解密FCKeditor 2.0 的设置.修改.使用方法
比较不错的修改FCKEditor的修改方法
FCKeditor2.3 For PHP 详细整理的使用参考
又一个不错的FCKeditor 2.2的安装、修改和调用方法
FCKeditor的几点修改小结
ASX文件 终极教程
DISCUZ论坛的UBB编辑器(增加灵活调用,支持ASP UBB解析)打包下载
Qzone编辑器QzoneEditor打包下载
FCKEditor v2.6 编辑器配置图解教程
asp.net 为FCKeditor开发代码高亮插件实现代码
宝丽通实现连续播放实现代码
jsp Ewebeditor使用说明
编辑器中designMode和contentEditable的属性的介绍
修改fckeditor的文件上传功能步骤

网页编辑器 中的 asp.net 为FCKeditor开发代码高亮插件实现代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2010-01-10   浏览: 85 ::
收藏到网摘: n/a

昨天已经将BlogEngine的可视化编辑器换成了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 http://www.ruanchen.com/"/upload/tech/20100110/20100110121619_8dd48d6a2e2cad213179a3992c0be53c.jpeg" border=0>
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将这个插件加入就可以了