LUKIYA'S NEVERLAND

春去秋来,花谢花开。


原文地址: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( 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" />

在<configuration>和</configuration>间加
<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文件(代码高亮处理)代码如下:

?

<% @ 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 ="允许代码折叠" /> &nbsp; < 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 > &nbsp; </ td >
< td >< asp:Button Runat ="server" ID ="HighlightButton" Text ="确 定" OnClick ="HighlightButton_Click" /> &nbsp;&nbsp;&nbsp;&nbsp; < 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
Inherits System.Web.UI.Page

Protected 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( 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( 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,加上代码高亮,编辑器几乎完美,嘿嘿,俺现在就是用这个。