CuteEditor学习总结技巧

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转换成控件并添加到页面上.综上代码如下:

<%@Register Assembly=”CuteEditor” Namespace=”CuteEditor” TagPrefix=”CE”%>
<CE:Editor ID=”Editor1” runat=”server” FilesPath=”/admin/CuteSoft_Client/CuteEditor/”EditorWysiwygModeCss=”/admin/CuteSoft_Client/CuteEditor/themes/example.css” ThemeType=”Office2003_BlueTheme”></CE:Editor>

另：
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> 
//是否允许创建文件夹
    <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.net和C#写法有些不一样，这里我分别用这两种语言来实现这个功能：

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.vb的Page_Load事件下增加代码

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

    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

End Class

工具栏中多了一个按钮，接下来把codehighlighter的dll包括三个dll文件:点击此处下载
ActiproSoftware.CodeHighlighter.Net20.dll和ActiproSoftware.Shared.Net20.dll和CodeHighlighterTest.dll

按刚才的方法copy到bin目录下，再把Languages(点击此处下载)目录拷贝到应用程序根目录下，这里还要对web.config进行配置一下，在<configuration>的<configSections>下增加一句：

在<configuration>和</configuration>间加

建立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="允许代码折叠" /> <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代码：

Public 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.Replace("'", "\'") & "');window.close();")
            sb.Append("<")
            sb.Append("/")
            sb.Append("script")
            sb.Append(">")
            ScriptOutPut.InnerHtml = sb.ToString()
        End If
    End Sub
End Class

C#的实现:
Vb.net和C#在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并加以修改并验证的。

posted @ 2012-11-09 15:57 Andy_Wong 阅读(358) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Andy_Wong

CuteEditor学习总结技巧

公告