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

另：
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代码

在CuteEditor.aspx.cs中:

  protected void Page_Load(object sender, EventArgs e)

下面看看qqEmotion.aspx的实现

  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

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

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

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

  VBNet的实现

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

 

 在CuteEditor.aspx.vb的Page_Load事件下增加代码

 工具栏中多了一个按钮，接下来把codehighlighter的dll包括三个dll文件:点击此处下载
ActiproSoftware.CodeHighlighter.Net20.dll和ActiproSoftware.Shared.Net20.dll和CodeHighlighterTest.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="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文件（代码高亮处理）代码如下：

>

InsertCode.aspx.vb代码：

 

End Class

C#的实现:
Vb.net和C#在insert.aspx页面的代码都是一样的，只是这个方法有点区别：（由于C#中单引号引起的原因）

  protected void CodeHighlighter_PostRender(object sender, EventArgs e)
        }

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

付出最大努力，追求最高成就。