CuteEditor for ASP.NET中文版是建立在Html基础之上,最简单易用、功能最强大的所见即所得Asp.net在线编辑器.
CuteEditor可以帮助Asp.net开发者轻松的对原来文本框(Textarea)中的内容(包括文字、图片等Html内容)进行编辑,更重要得是这些内容编辑的实现是所见即所得方式。CuteEditor还集成了文件(包括图片、文档等)上传、媒体(包括视频、声音等)文件直接插入等对你来说非常实用的功能模块。
    本文就主要以下三个方面谈谈CuteEditor.net的使用:
CuteEditor的基本使用;
CuteEditor怎样添加一个自定义按钮并实现其功能.
CuteEditor中怎样实现高亮代码显示功能.(vb.net和C#)
一、首先说说CuteEditor的基本使用:
1.下载必须的dll文件并添加引用到项目中去(点击此处下载).包括:
CuteEditor.dll
CuteEditor.lic(解密文件)
CuteEditor.ImageEditor.dll(5.0增加德EditorImage功能)
CuteEditor.SpellChecker.dll(拼写检查功能)
2.CuteSoft_Client(包括css) 点击此处下载
这是一个.net使用CuteEditor必须使用的文件夹,也是CuteEditor.dll所依赖的资源.可以在页面上为CuteEditor控件指定FIlesPath,:FilesPath=”/admin/CuteSoft_Client/CuteEditor/”,也可以默认(根目录)并为CuteEditor设置指定的样式.:EditorWysiwygModeCss=”/admin/CuteSoft_Cient/CuteEditor/themes/example.css”
3.Uploads文件夹
这个文件夹是用来为用户通过CuteEditor编辑器上传文件的路径,图片,Flash的文件夹(必须要有访问权限).
4.引用
右击控件工具栏把
CuteEditor.dll转换成控件并添加到页面上.综上代码如下:
Code

另:
1.可修改CuteSoft_Client"CuteEditor"Configuration"AutoConfigure文件夹下的文件,改变CuteEditor工具栏按钮的显示或排列.
2.可修改 CuteSoft_Client"CuteEditor"Configuration"Shared"Common.config来添加字体.
3.可修改 CuteSoft_Client"CuteEditor"Configruation"Security文件夹下的文件,改变CuteEditor属性的设定

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
 //是否限制上传图象尺寸
    
<security name="RestrictUploadedImageDimension">true</security>
//如果上传的文件已经存在,是否将其覆盖
    
<security name="AutoResizeUploadedImages">true</security>
//是否自动调整上传图象
    
<security name="AutoResizeUploadImages">true</security>
//上传图象的最大宽度
    
<security name="MaxImageWidth">2048</security>
//上传图象的最小宽度
    
<security name="MaxImageHeight">768</security>
//上传图象文件的最大值
    
<security name="MaxImageSize">100</security>
//上传媒体文件的最大值
    
<security name="MaxMediaSize">100</security>
//上传Flash文件的最大值
    
<security name="MaxFlashSize">100</security>
//文档最大值
    
<security name="MaxDocumentSize">30000</security>
//模板最大值
    
<security name="MaxTemplateSize">100</security>
//图象文件上传路径
    
<security name="ImageGalleryPath">~/uploads</security>
//媒体文件上传路径
    
<security name="MediaGalleryPath">~/uploads</security>
//Flash文件上传路径
    
<security name="FlashGalleryPath">~/uploads</security>
//模板路径
    
<security name="TemplateGalleryPath">~/templates</security>
//文件库路径
    
<security name="FilesGalleryPath">~/uploads</security>
//最小宽度
    
<security name="ThumbnailWidth">80</security>
//最小高度
    
<security name="ThumbnailHeight">80</security>
//最小列数
    
<security name="ThumbnailColumns">5</security>
//最小行数
    
<security name="ThumbnailRows">3</security>
//是否允许上传
    
<security name="AllowUpload">true</security>
//是否允许修改
    
<security name="AllowModify">true</security>
//是否允许重命名
    
<security name="AllowRename">true</security>
//是否允许删除
    
<security name="AllowDelete">true</security>
//是否允许复制
    
<security name="AllowCopy">true</security>
//是否允许移动
    
<security name="AllowMove">true</security> <!-- this is rename too -->
//是否允许创建文件夹
    
<security name="AllowCreateFolder">true</security>
//是否允许删除文件夹
    
<security name="AllowDeleteFolder">true</security>
//这里过滤(设置)图像文件格式
    
<security name="ImageFilters">
        
<item>.jpg</item>
        
<item>.jpeg</item>
        
<item>.gif</item>
        
<item>.png</item>
    
</security>
//这里过滤(设置)媒体文件格式
    
<security name="MediaFilters">
        
<item>.avi</item>
        
<item>.mpg</item>
        
<item>.mpeg</item>
        
<item>.mp3</item>
    
</security>
//这里过滤(设置)文档文件格式
    
<sec<item>.txt</item>
      
<item>.doc</item>
       
<item>.pdf</item>
      
<item>.zip</item>
       
<item>.rar</item>
      
<item>.avi</item>
      
<item>.mpg</item>
     
<item>.mpeg</item>
       
<item>.swf</item>
       
<item>.jpg</item>
       
<item>.jpeg</item>
      
<item>.gif</item>
       
<item>.png</item>
       
<item>.htm</item>
    
</security>
</configuration>

5.为了你能检查拼写错误,需要在web.config中添加
<add key=”DictionaryFolder” value=”bin”/>
这样的话CuteEditor的简单功能就实现了,运行后即可看到编辑器的出现。
二、怎样在CuteEditor编辑器中添加自定义的按钮并实现其功能。
这里我就主要实现给CuteEditor增加一个按钮和打开选择QQ表情的对话框作为案例:
QQ表情的素材文件:qqEmotion下载:点击此处下载
CuteEditor.aspx代码

<%@ Page Language="C#" AutoEventWireup="false" CodeFile="CuteEditor.aspx.cs" 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>给CuteEditor增加一个选择QQ表情的对话框</title>
<script language="JavaScript" type="text/javascript" >
function ShowqqEmotion(button)

var editor=GetEditor(button);
var newwin=window.showModalDialog("qqEmotion.aspx",editor,"dialogWidth:260px;dialogHeight:250px;");
PasteHtmlCommand(newwin,editor);
}

function GetEditor(button)
{
    
return CuteEditor_GetEditor(button);
}

function PasteHtmlCommand(content,Editor)
{
 
if(content!=null)
 
{
  Editor.ExecCommand(
"PasteHTML",true,content);
 }

}

</script>
</head>
<body>
 
<form id="form1" runat="server">
 
<div>
 
<CE:Editor ID="Editor1" runat="server">
 
</CE:Editor>
 
</div>
 
</form>
</body>
</html>

CuteEditor.aspx.cs:

  protected void Page_Load(object sender, EventArgs e)
        
{
             
//set the location of qqEmotion
            int pos = this.Editor1.ToolControls.IndexOf("InsertEmotion"+ 1;
            
//qq.gif的路径在CuteEditorTest\CuteSoft_Client\CuteEditor\Themes所对应的样式下(该图片存在就会在CuteEditor添加的按钮中显示出来,否则不能出现图片)
            WebControl ctrl = this.Editor1.CreateCommandButton("qqEmotion""qq.gif""插入QQ表情");
            ctrl.Attributes.Add(
"onclick""ShowqqEmotion(this)");
            
//add the button to the Editor
            this.Editor1.InsertToolControl(pos, "btnqqEmotion", ctrl);
         }

下面看看qqEmotion.aspx的实现
<%@ Page Language="C#" AutoEventWireup="true" Codebehind="qqEmotion.aspx.cs" Inherits="CuteEditorTest.qqEmotion" %>

<!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>Untitled Page</title>
    
<script type="text/javascript" language="javascript">
    
//Set QQFace
    function SetQQFace(face)
    
{
        window.returnValue
=face;//return the choose face
        window.close();//close current window
    }

    
</script>
</head>
<body>
    
<form id="form1" runat="server">
        
<div>
            
<table id="qqEmotionTable" border="0">
                
<tbody>
                    
<tr>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/01.gif\'/>')">
                                
<img src="qqEmotion/01.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/02.gif\'/>')">
                                
<img src="qqEmotion/02.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/03.gif\'/>')">
                                
<img src="qqEmotion/03.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/04.gif\'/>')">
                                
<img src="qqEmotion/04.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/05.gif\'/>')">
                                
<img src="qqEmotion/05.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/06.gif\'/>')">
                                
<img src="qqEmotion/06.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/07.gif\'/>')">
                                
<img src="qqEmotion/07.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/08.gif\'/>')">
                                
<img src="qqEmotion/08.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/09.gif\'/>')">
                                
<img src="qqEmotion/09.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/10.gif\'/>')">
                                
<img src="qqEmotion/10.gif"></div>
                        
</td>
                    
</tr>
                    
<tr>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/11.gif\'/>')">
                                
<img src="qqEmotion/11.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/12.gif\'/>')">
                                
<img src="qqEmotion/12.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/13.gif\'/>')">
                                
<img src="qqEmotion/13.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/14.gif\'/>')">
                                
<img src="qqEmotion/14.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/15.gif\'/>')">
                                
<img src="qqEmotion/15.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/16.gif\'/>')">
                                
<img src="qqEmotion/16.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/17.gif\'/>')">
                                
<img src="qqEmotion/17.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/18.gif\'/>')">
                                
<img src="qqEmotion/18.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/19.gif\'/>')">
                                
<img src="qqEmotion/19.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/20.gif\'/>')">
                                
<img src="qqEmotion/20.gif"></div>
                        
</td>
                    
</tr>
                    
<tr>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/21.gif\'/>')">
                                
<img src="qqEmotion/21.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/22.gif\'/>')">
                                
<img src="qqEmotion/22.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/23.gif\'/>')">
                                
<img src="qqEmotion/23.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/24.gif\'/>')">
                                
<img src="qqEmotion/24.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/25.gif\'/>')">
                                
<img src="qqEmotion/25.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/26.gif\'/>')">
                                
<img src="qqEmotion/26.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/27.gif\'/>')">
                                
<img src="qqEmotion/27.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/28.gif\'/>')">
                                
<img src="qqEmotion/28.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/29.gif\'/>')">
                                
<img src="qqEmotion/29.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/30.gif\'/>')">
                                
<img src="qqEmotion/30.gif"></div>
                        
</td>
                    
</tr>
                    
<tr>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/31.gif\'/>')">
                                
<img src="qqEmotion/31.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/32.gif\'/>')">
                                
<img src="qqEmotion/32.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/33.gif\'/>')">
                                
<img src="qqEmotion/33.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/34.gif\'/>')">
                                
<img src="qqEmotion/34.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/35.gif\'/>')">
                                
<img src="qqEmotion/35.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/36.gif\'/>')">
                                
<img src="qqEmotion/36.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/37.gif\'/>')">
                                
<img src="qqEmotion/37.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/38.gif\'/>')">
                                
<img src="qqEmotion/38.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/39.gif\'/>')">
                                
<img src="qqEmotion/39.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/40.gif\'/>')">
                                
<img src="qqEmotion/40.gif"></div>
                        
</td>
                    
</tr>
                    
<tr>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/41.gif\'/>')">
                                
<img src="qqEmotion/41.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/42.gif\'/>')">
                                
<img src="qqEmotion/42.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/43.gif\'/>')">
                                
<img src="qqEmotion/43.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/44.gif\'/>')">
                                
<img src="qqEmotion/44.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/45.gif\'/>')">
                                
<img src="qqEmotion/45.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/46.gif\'/>')">
                                
<img src="qqEmotion/46.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/47.gif\'/>')">
                                
<img src="qqEmotion/47.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/48.gif\'/>')">
                                
<img src="qqEmotion/48.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/49.gif\'/>')">
                                
<img src="qqEmotion/49.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/angry.gif\'/>')">
                                
<img src="qqEmotion/angry.gif"></div>
                        
</td>
                    
</tr>
                    
<tr>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/bb.gif\'/>')">
                                
<img src="qqEmotion/bb.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/blink.gif\'/>')">
                                
<img src="qqEmotion/blink.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/cake.gif\'/>')">
                                
<img src="qqEmotion/cake.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/chris.gif\'/>')">
                                
<img src="qqEmotion/chris.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/cold.gif\'/>')">
                                
<img src="qqEmotion/cold.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/cool.gif\'/>')">
                                
<img src="qqEmotion/cool.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/geek.gif\'/>')">
                                
<img src="qqEmotion/geek.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/god.gif\'/>')">
                                
<img src="qqEmotion/god.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/icon10.gif\'/>')">
                                
<img src="qqEmotion/icon10.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/icon11.gif\'/>')">
                                
<img src="qqEmotion/icon11.gif"></div>
                        
</td>
                    
</tr>
                    
<tr>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/icon12.gif\'/>')">
                                
<img src="qqEmotion/icon12.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/icon14.gif\'/>')">
                                
<img src="qqEmotion/icon14.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/icon15.gif\'/>')">
                                
<img src="qqEmotion/icon15.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/icon16.gif\'/>')">
                                
<img src="qqEmotion/icon16.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/icon17.gif\'/>')">
                                
<img src="qqEmotion/icon17.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/icon18.gif\'/>')">
                                
<img src="qqEmotion/icon18.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/icon19.gif\'/>')">
                                
<img src="qqEmotion/icon19.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/icon20.gif\'/>')">
                                
<img src="qqEmotion/icon20.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/knife.gif\'/>')">
                                
<img src="qqEmotion/knife.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/laf.gif\'/>')">
                                
<img src="qqEmotion/laf.gif"></div>
                        
</td>
                    
</tr>
                    
<tr>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/lol.gif\'/>')">
                                
<img src="qqEmotion/lol.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/lucky.gif\'/>')">
                                
<img src="qqEmotion/lucky.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/mad.gif\'/>')">
                                
<img src="qqEmotion/mad.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/noidea.gif\'/>')">
                                
<img src="qqEmotion/noidea.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/nugget.gif\'/>')">
                                
<img src="qqEmotion/nugget.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/sad.gif\'/>')">
                                
<img src="qqEmotion/sad.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/shifty.gif\'/>')">
                                
<img src="qqEmotion/shifty.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/shocked.gif\'/>')">
                                
<img src="qqEmotion/shocked.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/silence.gif\'/>')">
                                
<img src="qqEmotion/silence.gif"></div>
                        
</td>
                        
<td>
                            
<div onclick="SetQQFace('<img src=\'<%=AbsolutionPath%>qqEmotion/smile.gif\'/>')">
                                
<img src="qqEmotion/smile.gif"></div>
                        
</td>
                    
</tr>
                
</tbody>
            
</table>
        
</div>
    
</form>
</body>
</html>

  qqEmotion.aspx.cs的实现:

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 CuteEditorTest
{
    
public partial class qqEmotion : System.Web.UI.Page
    
{
        
protected void Page_Load(object sender, EventArgs e)
        
{

        }

        
//Set Property of AbsolutionPath
        public string AbsolutionPath
        
{
            
get
            
{
                
if (ViewState["path"!= null)
                
{
                    
return ViewState["Path"].ToString();
                }

                ViewState[
"Path"= GetCurrentAbsolutionPath();
                
return ViewState["Path"].ToString();
            }

        }

        
//Get AbsolutionPath of current site
        public string GetCurrentAbsolutionPath()
        
{
            
string port = Request.ServerVariables["SERVER_PORT"];
            
if (port == null || port == "80" || port == "443")
            
{
                port 
= "";
            }

            
else
            
{
                port 
= ":" + port;
            }

            
string protocol = Request.ServerVariables["SERVER_PORT_SECURE"];
            
if (protocol == null || protocol == "0")
            
{
                protocol 
= "http://";
            }

            
else
            
{
                protocol 
= "https://";
            }

            
return protocol + Request.ServerVariables["SERVER_NAME"+ port + "/";
        }

    }

}

  到这里就已经实现了当点击CuteEditor中的qq.gif图片时就能弹出选择QQ表情的的对话框,并且当选择其中的一个QQ表情时会把当前选择的表情的路径返回给CuteEditor编辑器中 

三、下面最后一个问题就是如果在CuteEditor添加高亮的代码显示功能 

CuteEditor增加高亮代码显示功能,就需要使用CodeHighlighte,您可以到http://www.codehighlighter.com下载最新版,由于这个问题的vb.netC#写法有些不一样,这里我分别用这两种语言来实现这个功能:

  VBNet的实现

1.       首先还在在CuteEditor按钮上添加按钮且用javascript来实现弹出对话框来使用CodeHighlighte控件.(同上)

 

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="vbCuteEditor._Default" %>
<%@ Register  TagPrefix="CE" Assembly="CuteEditor" Namespace="CuteEditor" %>
<!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>Untitled Page</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“,editor,"dialogWidth:600px;dialogHeight:430px");
 }
</script>
</head>
<body>
    <form id=
"form1" runat="server">
    <div>
     <CE:Editor ID=
"Editor1" runat="server" Width="100%" Height="100%" EnableStripScriptTags="False">
         <FrameStyle BackColor=
"White" BorderColor="#DDDDDD" BorderStyle="Solid" BorderWidth="1px"
             CssClass=
"CuteEditorFrame" Height="100%" Width="100%" />
      </CE:Editor>
    </div>
    </form>
</body>
</html>

 在CuteEditor.aspx.vbPage_Load事件下增加代码

Partial Public Class _Default
    
Inherits System.Web.UI.Page

    
Protected Sub Page_Load(ByVal sender As ObjectByVal 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


End Class

 工具栏中多了一个按钮,接下来把codehighlighterdll包括三个dll文件:点击此处下载
ActiproSoftware.CodeHighlighter.Net20.dllActiproSoftware.Shared.Net20.dllCodeHighlighterTest.dll

按刚才的方法copybin目录下,再把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="Assembly" definitionPath="~/Languages/Lexers/ActiproSoftware.Assembly.xml" />
      
<language key="BatchFile" definitionPath="~/Languages/Lexers/ActiproSoftware.BatchFile.xml" />
      
<language key="C#" definitionPath="~/Languages/Lexers/ActiproSoftware.CSharp.xml"/>
      
<language key="CSS" definitionPath="~/Languages/Lexers/ActiproSoftware.CSS.xml" />
      
<language key="HTML" definitionPath="~/Languages/Lexers/ActiproSoftware.HTML.xml" />
      
<language key="INIFile" definitionPath="~/Languages/Lexers/ActiproSoftware.INIFile.xml" />
      
<language key="Java" definitionPath="~/Languages/Lexers/ActiproSoftware.Java.xml" />
      
<language key="JScript" definitionPath="~/Languages/Lexers/ActiproSoftware.JScript.xml" />
      
<language key="Lua" definitionPath="~/Languages/Lexers/ActiproSoftware.Lua.xml" />
      
<language key="MSIL" definitionPath="~/Languages/Lexers/ActiproSoftware.MSIL.xml" />
      
<language key="Pascal" definitionPath="~/Languages/Lexers/ActiproSoftware.Pascal.xml" />
      
<language key="Perl" definitionPath="~/Languages/Lexers/ActiproSoftware.Perl.xml" />
      
<language key="PHP" definitionPath="~/Languages/Lexers/ActiproSoftware.PHP.xml" />
      
<language key="PowerShell" definitionPath="~/Languages/Lexers/ActiproSoftware.PowerShell.xml" />
      
<language key="Python" definitionPath="~/Languages/Lexers/ActiproSoftware.Python.xml" />
      
<language key="SQL" definitionPath="~/Languages/Lexers/ActiproSoftware.SQL.xml" />
      
<language key="VB.NET" definitionPath="~/Languages/Lexers/ActiproSoftware.VBDotNet.xml" semanticParserType="vbCuteEditor.SemanticVBDotNetParser, vbCuteEditor"/>
      
<language key="VBScript" definitionPath="~/Languages/Lexers/ActiproSoftware.VBScript.xml" />
      
<language key="XAML" definitionPath="~/Languages/Lexers/ActiproSoftware.XAML.xml" />
      
<language key="XML" definitionPath="~/Languages/Lexers/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" EnableEventValidation="false" ValidateRequest="false" AutoEventWireup="false" CodeBehind="InsertCode.aspx.vb" Inherits="vbCuteEditor.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>Untitled Page</title>
     <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="允许代码折叠" />&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代码:

 

Public Partial Class InsertCode
    
Inherits System.Web.UI.Page

    
Protected Sub Page_Load(ByVal sender As ObjectByVal 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 ObjectByVal 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 ObjectByVal 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.Replace("'""\'"& "');window.close();")
            sb.Append(
"<")
            sb.Append(
"/")
            sb.Append(
"script")
            sb.Append(
">")
            ScriptOutPut.InnerHtml 
= sb.ToString()
        
End If
    
End Sub

End Class

C#的实现:
Vb.netC#insert.aspx页面的代码都是一样的,只是这个方法有点区别:(由于C#中单引号引起的原因)

  protected void CodeHighlighter_PostRender(object sender, EventArgs e)
        
{
            
if (Page.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();

              }

        }

引起这种情况不同的C#把'转换\'需要这样来:replace("'","\\\'")
本文是参考:http://www.yaosansi.com/blog/article.asp?id=971并加以修改并验证的。