学步园

  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
<%@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> <!-- 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="