原文:http://www.cnblogs.com/goody9807/archive/2008/05/14/1196800.html
CuteEditor在很多网站上都有介绍了，是一款超级Cool的web在线编辑器,下载地址用google找一下就能找到，就不提供了，但是安装方法还是要说一下，因本次是使用vs2005。
上面的只是个最简单的安装,还有比如控制CueEditor的显示,已经安全性和那个什么上传的啊,还有控制用户上传的目录啊,或者给每个用户建个他们自己的图片目录啊,还必须要另外设置，这些暂时先略过吧，您可以自己看一下说明进行设置，这里不多说了。我们现在要开始要给CuteEditor增加高亮代码显示功能，俺这里使用的是CodeHighlighter控件，您可以到http://www.codehighlighter.com/下载最新版，最新版同时支持.net1和.net2，因为使用的是vs2005，俺就使用了最新版，现在我们先来给CuteEditor增加一个按钮和打开插入高亮代码的页面代码。
CuteEditor.aspx代码
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="testCuteeditor._Default" %>
<%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<script language="JavaScript" type="text/javascript" >
function ShowMyDialog(button)
{
//use CuteEditor_GetEditor(elementinsidetheEditor) to get the cute editor instance
var editor=CuteEditor_GetEditor(button);
//show the dialog page , and pass the editor as newwin.dialogArguments
var newwin=showModelessDialog("insertcode.aspx?_rand="+new Date().getTime()
,editor,"dialogWidth:600px;dialogHeight:430px");
}
</script>
<div>
<CE:Editor ID="cuteedit" runat="server" AutoConfigure="Simple">
<FrameStyle BackColor="White" BorderColor="#DDDDDD" BorderStyle="Solid" BorderWidth="1px"
CssClass="CuteEditorFrame" Height="100%" Width="100%" />
</CE:Editor>
</div>
</form>
</body>
</html>
Code
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace testCuteeditor
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
int pos = cuteedit.ToolControls.IndexOf("Italic") + 20;
System.Web.UI.WebControls.WebControl ctrl = cuteedit.CreateCommandButton("myinsertbutton", "csharp.gif", "插入代码");
ctrl.Attributes.Add("onclick", "ShowMyDialog(this)");
cuteedit.InsertToolControl(pos, "myinsertbutton", ctrl);
}
}
}
工具栏中多了一个按钮，接下来把codehighlighter的dll控件也按刚才的方法copy到bin目录下，再把Languages目录拷贝到应用程序根目录下，这里还要对web.config进行配置一下，在<configuration>的<configSections>下增加一句：Code
<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="BatchFile" definitionPath="~/Languages/ActiproSoftware.BatchFile.xml" />
<language key="C#" definitionPath="~/Languages/ActiproSoftware.CSharp.xml" semanticParserType="CodeHighlighterTest.SemanticCSharpParser, CodeHighlighterTest" />
<language key="CSS" definitionPath="~/Languages/ActiproSoftware.CSS.xml" semanticParserType="CodeHighlighterTest.SemanticCssParser, CodeHighlighterTest" />
<language key="HTML" definitionPath="~/Languages/ActiproSoftware.HTML.xml" semanticParserType="CodeHighlighterTest.SemanticHtmlParser, CodeHighlighterTest" />
<language key="INIFile" definitionPath="~/Languages/ActiproSoftware.INIFile.xml" />
<language key="Java" definitionPath="~/Languages/ActiproSoftware.Java.xml" semanticParserType="CodeHighlighterTest.SemanticJavaParser, CodeHighlighterTest" />
<language key="JScript" definitionPath="~/Languages/ActiproSoftware.JScript.xml" semanticParserType="CodeHighlighterTest.SemanticJScriptParser, CodeHighlighterTest" />
<language key="Perl" definitionPath="~/Languages/ActiproSoftware.Perl.xml" />
<language key="PHP" definitionPath="~/Languages/ActiproSoftware.PHP.xml" />
<language key="Python" definitionPath="~/Languages/ActiproSoftware.Python.xml" />
<language key="SQL" definitionPath="~/Languages/ActiproSoftware.SQL.xml" semanticParserType="CodeHighlighterTest.SemanticSqlParser, CodeHighlighterTest" />
<language key="VB.NET" definitionPath="~/Languages/ActiproSoftware.VBDotNet.xml" semanticParserType="CodeHighlighterTest.SemanticVBDotNetParser, CodeHighlighterTest" />
<language key="VBScript" definitionPath="~/Languages/ActiproSoftware.VBScript.xml" semanticParserType="CodeHighlighterTest.SemanticVBDotNetParser, CodeHighlighterTest" />
<language key="XML" definitionPath="~/Languages/ActiproSoftware.XML.xml" />
</languages>
<lineNumberMargin foreColor="Teal" paddingCharacter=" " visible="true" />
<outlining enabled="true" imagesPath="~/Images/OutliningIndicators/" />
<spacesInTabs count="4" />
</codeHighlighter>
建立InsertCode.aspx文件（代码高亮处理）代码如下
Code
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InsertCode.aspx.cs" ValidateRequest="false" Inherits="testCuteeditor.InsertCode" %>
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>插入代码</title>
<style type="text/css">
body { BACKGROUND-COLOR: #e5e5e5 }
.tb{ FONT-SIZE: 13px }
.code{ width:400px;height:255px; }
</style>
<base target="_self" />
</head>
<body>
<form id="form1" runat="server">
<table class="tb" cellspacing="0" cellpadding="3" border="0">
<tr>
<th align="right" style="WIDTH:80px">编程语言:</th>
<td><asp:DropDownList Runat="server" ID="LanguageDropDownList"/></td>
</tr>
<tr>
<th align="right">选项:</th>
<td><asp:CheckBox Runat="server" ID="OutliningEnabledCheckBox" Checked="True" Text="允许代码折叠" /> <asp:CheckBox Runat="server" ID="LineNumberMarginVisibleCheckBox" Checked="True" Text="显示行号" /></td>
</tr>
<tr>
<th valign="top" align="right">代码:</th>
<td><asp:TextBox Runat="server" ID="CodeTextBox" TextMode="MultiLine" Rows="10" Columns="80" CssClass="code" /></td>
</tr>
<tr>
<td> </td>
<td><asp:Button Runat="server" ID="HighlightButton" Text="确 定" OnClick="HighlightButton_Click"/> <input onclick="return window.close()" type="button" value="关 闭" id="Button1" /></td>
</tr>
<tr>
<td></td>
<td><pre>
<CH:CodeHighlighter ID="CodeHighlighter1" runat="server" OnPostRender="CodeHighlighter1_PostRender"></CH:CodeHighlighter></pre></td>
</tr>
</table>
<div id="ScriptOutPut" runat="server"></div>
</form>
</body>
</html>
InsertCode.aspx.cs代码：Code
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace testCuteeditor
{
public partial class InsertCode : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ActiproSoftware.CodeHighlighter.CodeHighlighterConfiguration config = (ActiproSoftware.CodeHighlighter.CodeHighlighterConfiguration)System.Configuration.ConfigurationManager.GetSection("codeHighlighter");
foreach (string key in config.LanguageConfigs.Keys)
{
LanguageDropDownList.Items.Add(key);
}
}
}
protected void HighlightButton_Click(object sender, EventArgs e)
{
CodeHighlighter1.Text = CodeTextBox.Text;
CodeHighlighter1.OutliningEnabled = true;
CodeHighlighter1.LanguageKey = LanguageDropDownList.SelectedValue;
CodeHighlighter1.OutliningEnabled = OutliningEnabledCheckBox.Checked;
CodeHighlighter1.LineNumberMarginVisible = LineNumberMarginVisibleCheckBox.Checked;
}
protected void CodeHighlighter1_PostRender(object sender, EventArgs e)
{
if (IsPostBack)
{
string html = CodeHighlighter1.Output;
html = html.Replace("\r\n", "<br />");
System.Text.StringBuilder htmlsb = new System.Text.StringBuilder(html);
htmlsb.Replace("\\", "\\\\");
htmlsb.Replace("'", "\\\'");
html = htmlsb.ToString();
string divstr= "<div style=\\'BORDER-RIGHT: windowtext 0.5pt solid;PADDING-RIGHT: 5.4pt; BORDER-TOP: windowtext 0.5pt solid; PADDING-LEFT: 5.4pt; BACKGROUND: #e6e6e6; PADDING-BOTTOM: 4px;PADDING-TOP: 4px;BORDER-LEFT: windowtext 0.5pt solid;WIDTH: 98%; BORDER-BOTTOM: windowtext 0.5pt solid;word-break:break-all\\'>";
html = divstr + html + "</div>";
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("<");
sb.Append("script");
sb.Append(">");
sb.Append("var editor=window.dialogArguments;editor.ExecCommand('PasteHTML',false,'" + html + "');window.close();");
sb.Append("<");
sb.Append("/");
sb.Append("script");
sb.Append(">");
ScriptOutPut.InnerHtml = sb.ToString();
}
}
}
}
CuteEditor在很多网站上都有介绍了，是一款超级Cool的web在线编辑器,下载地址用google找一下就能找到，就不提供了，但是安装方法还是要说一下，因本次是使用vs2005。
我们在vs2005里面新建个web site吧，把CuteEditor.dll（主控件）、CuteEditor.lic（许可证）、CuteEditor.ImageEditor.dll（因为5.0增加了个EditorImage的功能）、NetSpell.SpellChecker.dll(拷这个的原因是默认打开拼写检查)这几个文件拷贝到web site的bin目录下，刷新bin目录（不像vs2003需要引用dll），同时我们也要把解压缩后的CuteSoft_Client目录全部拷贝到应用程序的根目录下。然后把CuteEditor添加到工具面板.我们在工具面板里面右键选择"选择项",在出来的对话框里面选择"游览",找到CuteEditor.dll,一路确定就可以了。
我们再添加个CuteEditor.aspx,把工具面板里面的Editor拖到页面上来，这时你就可以运行你的程序使用CuteEditor了
上面的只是个最简单的安装,还有比如控制CueEditor的显示,已经安全性和那个什么上传的啊,还有控制用户上传的目录啊,或者给每个用户建个他们自己的图片目录啊,还必须要另外设置，这些暂时先略过吧，您可以自己看一下说明进行设置，这里不多说了。我们现在要开始要给CuteEditor增加高亮代码显示功能，俺这里使用的是CodeHighlighter控件，您可以到http://www.codehighlighter.com/下载最新版，最新版同时支持.net1和.net2，因为使用的是vs2005，俺就使用了最新版，现在我们先来给CuteEditor增加一个按钮和打开插入高亮代码的页面代码。
CuteEditor.aspx代码
Code<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="testCuteeditor._Default" %>
<%@ Register Assembly="CuteEditor" Namespace="CuteEditor" TagPrefix="CE" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
</head>
<body>
<form id="form1" runat="server">
<script language="JavaScript" type="text/javascript" >
function ShowMyDialog(button)
{
//use CuteEditor_GetEditor(elementinsidetheEditor) to get the cute editor instance
var editor=CuteEditor_GetEditor(button);
//show the dialog page , and pass the editor as newwin.dialogArguments
var newwin=showModelessDialog("insertcode.aspx?_rand="+new Date().getTime()
,editor,"dialogWidth:600px;dialogHeight:430px");
}
</script>
<div>
<CE:Editor ID="cuteedit" runat="server" AutoConfigure="Simple">
<FrameStyle BackColor="White" BorderColor="#DDDDDD" BorderStyle="Solid" BorderWidth="1px"
CssClass="CuteEditorFrame" Height="100%" Width="100%" />
</CE:Editor>
</div>
</form>
</body>
</html>
CuteEditor.aspx.cs代码
Codeusing System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace testCuteeditor
{
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
int pos = cuteedit.ToolControls.IndexOf("Italic") + 20;
System.Web.UI.WebControls.WebControl ctrl = cuteedit.CreateCommandButton("myinsertbutton", "csharp.gif", "插入代码");
ctrl.Attributes.Add("onclick", "ShowMyDialog(this)");
cuteedit.InsertToolControl(pos, "myinsertbutton", ctrl);
}
}
}
工具栏中多了一个按钮，接下来把codehighlighter的dll控件也按刚才的方法copy到bin目录下，再把Languages目录拷贝到应用程序根目录下，这里还要对web.config进行配置一下，在<configuration>的<configSections>下增加一句：
<section name="codeHighlighter" type="ActiproSoftware.CodeHighlighter.CodeHighlighterConfigurationSectionHandler, ActiproSoftware.CodeHighlighter.Net20" />
在<configuration>和</configuration>间加
Code<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="BatchFile" definitionPath="~/Languages/ActiproSoftware.BatchFile.xml" />
<language key="C#" definitionPath="~/Languages/ActiproSoftware.CSharp.xml" semanticParserType="CodeHighlighterTest.SemanticCSharpParser, CodeHighlighterTest" />
<language key="CSS" definitionPath="~/Languages/ActiproSoftware.CSS.xml" semanticParserType="CodeHighlighterTest.SemanticCssParser, CodeHighlighterTest" />
<language key="HTML" definitionPath="~/Languages/ActiproSoftware.HTML.xml" semanticParserType="CodeHighlighterTest.SemanticHtmlParser, CodeHighlighterTest" />
<language key="INIFile" definitionPath="~/Languages/ActiproSoftware.INIFile.xml" />
<language key="Java" definitionPath="~/Languages/ActiproSoftware.Java.xml" semanticParserType="CodeHighlighterTest.SemanticJavaParser, CodeHighlighterTest" />
<language key="JScript" definitionPath="~/Languages/ActiproSoftware.JScript.xml" semanticParserType="CodeHighlighterTest.SemanticJScriptParser, CodeHighlighterTest" />
<language key="Perl" definitionPath="~/Languages/ActiproSoftware.Perl.xml" />
<language key="PHP" definitionPath="~/Languages/ActiproSoftware.PHP.xml" />
<language key="Python" definitionPath="~/Languages/ActiproSoftware.Python.xml" />
<language key="SQL" definitionPath="~/Languages/ActiproSoftware.SQL.xml" semanticParserType="CodeHighlighterTest.SemanticSqlParser, CodeHighlighterTest" />
<language key="VB.NET" definitionPath="~/Languages/ActiproSoftware.VBDotNet.xml" semanticParserType="CodeHighlighterTest.SemanticVBDotNetParser, CodeHighlighterTest" />
<language key="VBScript" definitionPath="~/Languages/ActiproSoftware.VBScript.xml" semanticParserType="CodeHighlighterTest.SemanticVBDotNetParser, CodeHighlighterTest" />
<language key="XML" definitionPath="~/Languages/ActiproSoftware.XML.xml" />
</languages>
<lineNumberMargin foreColor="Teal" paddingCharacter=" " visible="true" />
<outlining enabled="true" imagesPath="~/Images/OutliningIndicators/" />
<spacesInTabs count="4" />
</codeHighlighter>
建立InsertCode.aspx文件（代码高亮处理）代码如下
Code<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="InsertCode.aspx.cs" ValidateRequest="false" Inherits="testCuteeditor.InsertCode" %>
<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>插入代码</title>
<style type="text/css">
body { BACKGROUND-COLOR: #e5e5e5 }
.tb{ FONT-SIZE: 13px }
.code{ width:400px;height:255px; }
</style>
<base target="_self" />
</head>
<body>
<form id="form1" runat="server">
<table class="tb" cellspacing="0" cellpadding="3" border="0">
<tr>
<th align="right" style="WIDTH:80px">编程语言:</th>
<td><asp:DropDownList Runat="server" ID="LanguageDropDownList"/></td>
</tr>
<tr>
<th align="right">选项:</th>
<td><asp:CheckBox Runat="server" ID="OutliningEnabledCheckBox" Checked="True" Text="允许代码折叠" /> <asp:CheckBox Runat="server" ID="LineNumberMarginVisibleCheckBox" Checked="True" Text="显示行号" /></td>
</tr>
<tr>
<th valign="top" align="right">代码:</th>
<td><asp:TextBox Runat="server" ID="CodeTextBox" TextMode="MultiLine" Rows="10" Columns="80" CssClass="code" /></td>
</tr>
<tr>
<td> </td>
<td><asp:Button Runat="server" ID="HighlightButton" Text="确 定" OnClick="HighlightButton_Click"/> <input onclick="return window.close()" type="button" value="关 闭" id="Button1" /></td>
</tr>
<tr>
<td></td>
<td><pre>
<CH:CodeHighlighter ID="CodeHighlighter1" runat="server" OnPostRender="CodeHighlighter1_PostRender"></CH:CodeHighlighter></pre></td>
</tr>
</table>
<div id="ScriptOutPut" runat="server"></div>
</form>
</body>
</html>
InsertCode.aspx.cs代码：
Codeusing System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
namespace testCuteeditor
{
public partial class InsertCode : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
ActiproSoftware.CodeHighlighter.CodeHighlighterConfiguration config = (ActiproSoftware.CodeHighlighter.CodeHighlighterConfiguration)System.Configuration.ConfigurationManager.GetSection("codeHighlighter");
foreach (string key in config.LanguageConfigs.Keys)
{
LanguageDropDownList.Items.Add(key);
}
}
}
protected void HighlightButton_Click(object sender, EventArgs e)
{
CodeHighlighter1.Text = CodeTextBox.Text;
CodeHighlighter1.OutliningEnabled = true;
CodeHighlighter1.LanguageKey = LanguageDropDownList.SelectedValue;
CodeHighlighter1.OutliningEnabled = OutliningEnabledCheckBox.Checked;
CodeHighlighter1.LineNumberMarginVisible = LineNumberMarginVisibleCheckBox.Checked;
}
protected void CodeHighlighter1_PostRender(object sender, EventArgs e)
{
if (IsPostBack)
{
string html = CodeHighlighter1.Output;
html = html.Replace("\r\n", "<br />");
System.Text.StringBuilder htmlsb = new System.Text.StringBuilder(html);
htmlsb.Replace("\\", "\\\\");
htmlsb.Replace("'", "\\\'");
html = htmlsb.ToString();
string divstr= "<div style=\\'BORDER-RIGHT: windowtext 0.5pt solid;PADDING-RIGHT: 5.4pt; BORDER-TOP: windowtext 0.5pt solid; PADDING-LEFT: 5.4pt; BACKGROUND: #e6e6e6; PADDING-BOTTOM: 4px;PADDING-TOP: 4px;BORDER-LEFT: windowtext 0.5pt solid;WIDTH: 98%; BORDER-BOTTOM: windowtext 0.5pt solid;word-break:break-all\\'>";
html = divstr + html + "</div>";
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("<");
sb.Append("script");
sb.Append(">");
sb.Append("var editor=window.dialogArguments;editor.ExecCommand('PasteHTML',false,'" + html + "');window.close();");
sb.Append("<");
sb.Append("/");
sb.Append("script");
sb.Append(">");
ScriptOutPut.InnerHtml = sb.ToString();
}
}
}
}
