原文地址:http://www.web3.cn/Content,2006,7,8,158.aspx
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代码
<%
...
@ Page Language
=
"
VB
"
AutoEventWireup
=
"
false
"
CodeFile
=
"
CuteEditor.aspx.vb
"
Inherits
=
"
_CuteEditor
"
%>
<%
...
@ 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
>
web3.cn——给CuteEditor5增加了高亮代码显示功能
</
title
>
<
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
>
</
head
>
<
body
>
<
form
id
="form1"
runat
="server"
>
<
div
>
<
CE:Editor
ID
="Editor1"
runat
="server"
>
</
CE:Editor
>
</
div
>
</
form
>
</
body
>
</
html
>
在CuteEditor.aspx.vb的Page_Load事件下增加代码
Protected
Sub Page_Load()
Sub
Page_Load(
ByVal
sender
As
Object
,
ByVal
e
As
System.EventArgs)
Handles
Me
.Load
Dim
pos
As
Integer
pos
=
Editor1.ToolControls.IndexOf(
"
Italic
"
)
+
20
'
图片位置(Themes/%ThemeName%/Images/csharp.gif)
Dim
ctrl
As
System.Web.UI.WebControls.WebControl
ctrl
=
Editor1.CreateCommandButton(
"
MyButton
"
,
"
csharp.gif
"
,
"
插入代码
"
)

ctrl.Attributes(
"
onclick
"
)
=
"
ShowMyDialog(this)
"
'
把按钮加入编辑器中
Editor1.InsertToolControl(pos,
"
MyButton
"
, ctrl)
End Sub
运行如下图:
工具栏中多了一个按钮,接下来把codehighlighter的dll控件也按刚才的方法copy到bin目录下,再把Languages目录拷贝到应用程序根目录下,这里还要对web.config进行配置一下,在<configuration>的<configSections>下增加一句:
<
section
name
="codeHighlighter"
type
="ActiproSoftware.CodeHighlighter.CodeHighlighterConfigurationSectionHandler, ActiproSoftware.CodeHighlighter.Net20"
/>
?
<%
...
@ Page Language
=
"
VB
"
AutoEventWireup
=
"
false
"
CodeFile
=
"
insertcode.aspx.vb
"
Inherits
=
"
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
runat
="server"
>
<
title
>
web3.cn——插入代码
</
title
>
<
base
target
="_self"
/>
<
style
type
="text/css"
>
...
body
{...}
{
BACKGROUND-COLOR
:
#e5e5e5
}
.tb
{...}
{
FONT-SIZE
:
13px
}
.code
{...}
{
width
:
400px
;
height
:
255px
;
}
</
style
>
</
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
="关 闭"
/></
td
>
</
tr
>
<
tr
>
<
td
></
td
>
<
td
><
pre
><
CH:CODEHIGHLIGHTER
id
="Codehighlighter1"
runat
="server"
OnPostRender
="CodeHighlighter_PostRender"
></
CH:CODEHIGHLIGHTER
></
pre
></
td
>
</
tr
>
</
table
>
<
div
id
="ScriptOutPut"
runat
="server"
></
div
>
</
form
>
</
body
>
</
html
>
InsertCode.aspx.vb代码:
?
Partial
Class insertcode
Class
insertcode
Inherits
System.Web.UI.Page


Protected
Sub Page_Load()
Sub
Page_Load(
ByVal
sender
As
Object
,
ByVal
e
As
System.EventArgs)
Handles
Me
.Load
Response.Expires
=
-
1
If
Not
IsPostBack
Then
Dim
key
As
String
Dim
config
As
ActiproSoftware.CodeHighlighter.CodeHighlighterConfiguration
=
CType
(System.Configuration.ConfigurationManager.GetSection(
"
codeHighlighter
"
), ActiproSoftware.CodeHighlighter.CodeHighlighterConfiguration)
For
Each
key
In
config.LanguageConfigs.Keys
LanguageDropDownList.Items.Add(key)
Next
key

End
If
End Sub
Protected
Sub HighlightButton_Click()
Sub
HighlightButton_Click(
ByVal
sender
As
Object
,
ByVal
e
As
System.EventArgs)
Handles
HighlightButton.Click
'
设置代码的语言
Codehighlighter1.LanguageKey
=
LanguageDropDownList.SelectedItem.Text
Codehighlighter1.OutliningEnabled
=
True
Codehighlighter1.Text
=
CodeTextBox.Text

'
允许代码折叠
Codehighlighter1.OutliningEnabled
=
OutliningEnabledCheckBox.Checked
'
显示行号
Codehighlighter1.LineNumberMarginVisible
=
LineNumberMarginVisibleCheckBox.Checked
End Sub
Public
Sub CodeHighlighter_PostRender()
Sub
CodeHighlighter_PostRender(
ByVal
sender
As
Object
,
ByVal
e
As
System.EventArgs)
If
IsPostBack
Then
Dim
html
As
String
=
Codehighlighter1.Output
html
=
html.Replace(vbCr
&
vbLf,
"
<br />
"
)
Dim
divstr
As
String
=
"
<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>
"
Dim
sb
As
System.Text.StringBuilder
=
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()
End
If
End Sub
End Class
好了,现在可以运行试用了,点击“插入代码”按钮:

把你要转换的代码放到代码区,选择代码的语言,点击“确定”后代码自动转换成高亮代码插入到编辑器中了

?怎么样,爽吧,使用CuteEditor5强大的功能,支持多种浏览器,还支持xhtml,加上代码高亮,编辑器几乎完美,嘿嘿,俺现在就是用这个。