CuteEditor编辑器（转）
CuteEditor是一款功能非常强大，支持图片上传、文件下载和word类似的文字编辑器。并且Vs2003和Vs2005都可以适用。对于新闻发布系统和博客之类的系统，是非常的方便的。对一个刚接触这款编辑器的朋友来说或许会遇到和我一样的许多问题，现在我就把我在使用这款编辑器的过程所得出的一些经验做个总结，如果您觉得好的话就支持我一下，我废话少说了，进入正题，先给个我的资源地址让大家下载，都是共享资源，可以放心下载，
/Files/hzuIT/CuteEditorDemo_51aspx.rar
当然首先这款编辑器，有的是直接下载.dll文件。我的资源中是破解版的，在bin目录下，请大家注意
现在介绍使用步骤：
1、将以下文件考贝到你站点根目录下的bin内(这编辑些在CuteEditor6.0/bin下都可以找到）
CuteEditor.dll
CuteEditor.ImageEditor.dll（6.0增加的EditorImage功能）
CuteEditor.lic（解密文件）
NetSpell.SpellChecker.dll（拼写检查功能）
注：（“.dic”为扩展名的文件是词典保存为纯文本文件的格式。将CuteEditor6.0/bin文件夹里的都拷到站点根目录下的bin内也可以）
2、将CuteSoft_Client文件夹拷贝到项目的相应目录.（CuteSoft_Client包含CuteEditor文件夹和example.css,放了控件图片,文件之类的数据example.css它指定了编辑器的样式）
注:FilesPath用来设置所对应的目录,如：FilesPath="~/admin/CuteSoft_Client/CuteEditor/"
3、在根目录下建立Uploads的文件夹作为上传图片及附件的根目录。
4、将CuteEditor.dll添加到工具箱
5、CuteEditor属性设置(假设当前页在根目录下)：
1)AutoConfigure设为simple,即选择最简单的界面显示方式
2)EditorWysiwygModecss设为：CuteSoft_Client/example.cs
3)FilesPath设为：CuteSoft_Client/CuteEditor
6、控件的调用代码如下：
<%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
<CE:EDITOR id="Editor1" runat="server" Width="700px" FilesPath="~/CuteSoft_Client/CuteEditor/" EditorWysiwygModeCss="../example.css" ThemeType="Office2003_BlueTheme"></CE:EDITOR>
7、修改Web.config文件
<appSettings>
<add key="DictionaryFolder" value="bin" />
</appSettings>
<system.web>
<browserCaps>
tagwriter=System.Web.UI.HtmlTextWriter
</browserCaps>
</system.web>
注意：
1)可以修改CuteSoft_Client\CuteEditor\Configuration\AutoConfigure文件夹下的文件，改便CuteEditor工具栏按钮的显示或排列。
2)可以修改文件CuteSoft_Client\CuteEditor\Configuration\Shared\Common.config来添加字体。
3)可以修改CuteSoft_Client\CuteEditor\Configuration\Security文件夹中的Admin.config，Default.config，Guest.config来控制权限上传图片和文件的问题。
（在属性里设置：SecurityPolicyFile为这.config三个中的一种）
特别提醒一下：有的系统可能要设置一下保存图片和文件的文件夹的访问权限，把Uploads文件夹的安全中everyone用户改为写入即可。不然文件会上传不上去，因为没有写入权限。
8、出错总结：
出错1：无法为类型 CuteEditor.Editor 授予有效的许可证。有关详细信息，请与组件的制造商联系。
原因：可能缺少CuteEditor.lic文件，把CuteEditor.lic文件考贝到Bin目录下即可。
出错2：点击工具栏里的插入样板按钮弹出这样的错误页面：使用主题 css 文件要求页上有标头控件。(例如 <head runat="server" />)。
原因：Asp.net2.0引入Theme后，要求<Head>标签runat="server"而CuteEditor是1.1版本引起的。
解决办法：给CuteSoft_Client\CuteEditor夹下的template.aspx里的<Head>添加runat="server"能解决加载时闪过的错误。给CuteSoft_Client/CuteEditor/Help下的default.aspx里的<Head>添加能解决点击工具栏里的插入样板按钮也弹出的错误页面。若点击其他工具栏也弹出同样的错误，可以右键错误页面，查看该页面的路径，修改在CuteSoft_Client文件夹下对应的页面中的<Head>标签。
上传文件配置admin.config：
重命名为时间：<security name="UseTimeStampRenameUploadedFiles">true</security>
文件大小
文件格式
可修改CuteSoft_Client\CuteEditor\Configuration\AutoConfigure文件夹下的文件，改便CuteEditor工具栏按钮的显示或排列。
可修改文件CuteSoft_Client\CuteEditor\Configuration\Shared\Common.config来添加字体。
修改文件的上传目录
string path = "~/upload";
Editor1.SetSecurityGalleryPath(path);
步骤：1、将CuteEditor文件夹下bin文件夹里的CuteEditor.dl，CuteEditor.lic，CuteEditor.ImageEditor.dll （5.0增加的EditorImage功能）拷到项目的bin目录下。如果需要拼写检查功能则还要拷NetSpell.SpellChecker.dll，并修改web.config文件，如下
<appSettings>
<add key="DictionaryFolder" value="bin"/>
</appSettings>
（“.dic”为扩展名的文件是词典保存为纯文本文件的格式。将bin文件夹里的都拷到项目的bin目录下也可以）
2、将CuteEditor文件夹下CuteSoft_Client文件夹全部拷贝到应用程序的根目录下，并在项目根目录下建立一个uploads文件夹.
3、打开VS,在工具栏上点击右键-添加/移除项,在自定义工具箱中的.NET Framework组件,流览将 bin文件夹下的cuteEditor.dll文件引用，将Editor拖到页面即可
CuteEditor 5.0属性设置
1、插入数据库：Editor1.Text
2、文件夹设置： Imports System.IO（引入命名空间）
Dim str As String = Session("UserName")
Dim path As String = "~/UploadFile/" + str + ""
Dim fullPath As String
fullPath = Server.MapPath("UploadFile\") + str
**判断以UserName命名的文件夹是否存在，不存在则创建以UserName命名的文件夹
If Not Directory.Exists(fullPath) Then
Directory.CreateDirectory(fullPath)
End If
**将默认路径uploads改为“path”所表示的路径
Editor1.SetSecurityGalleryPath(path)
3、按纽设置：* 属性----外观----AutoConfigure
* 代码 Editor1.AutoConfigure = AutoConfigure.Simple
* CuteEditor文件夹HowTo目录下的AddButton例子
4、上传文件大小设置（以flash为例）：Dim kb As Int32 = 200
Editor1.SetSecurityMaxFlashSize(kb)
CuteEditor真的是一款很好的web在线编辑器,但是5.0的安装和以前的版本有点不同,5.0的破解版的下载地址是:http://www.seaskyer.net,下载完后解下压缩吧,这个地球人都知道.
我们在vs2005里面新建个web site吧.然后把CuteEditor添加到工具面板.我们在工具面板里面右键选择choose item,在出来的对话框里面选择browser,找到CuteEditor.dll,一路确定就可以拉.
我们再添加个edit.asxp,把工具面板里面的Editor拖到页面上来.这个时候那个授权文件CuteEditor.lic应该也自动的到了bin目录下,如果没有我们必须手动烤进去.这个时候我们如果直接编译的话还是不可以的,会提示错误,因为5.0增加了个EditorImage的功能啊,所以我们必须要把CuteEditor.ImageEditor.dll和NetSpell.SpellChecker.dll(烤这个的原因是默认打开拼写检查)都烤到项目的bin目录下,同时我们也要把解压缩后的CuteSoft_Client目录全部拷贝到应用程序的根目录下.这个时候编译的时候应该没有错误了,如果还出现什么windows集成身份验证的错误,那么我们要修改IIS里面的配置,在iis的这个站点的属性里面有个目录安全性,再点身份验证和访问控制的编辑,把集成windows身份验证前面的小勾打上就是啊.
上面的只是个最简单的安装,还有比如控制CueEditor的显示,已经安全性和那个什么上传的啊,还有控制用户上传的目录啊,或者给每个用户建个他们自己的图片目录啊,还必须要另外设置,如果可能我江另外写下.我们这里现在要开始用Ajax.Net来把CuteEditor的内容插入数据库拉.
关于如何安装Ajax.Net,请见我的另外的一骗文章:Ajax.Net快速入门.
如何把CueEditor里面的内容用Ajax插入数据库呢?首先关键是获得CuteEditor的客户端ID,这个可以通过<%=Editor1.ClietID%>来获得.再就是如何在客户端获得Editor里面的内容.这个可以使用他的内在的JavaScript API,getHTML(),注意是HTML.下面是一个把CuteEditor的内容插入数据库的一个html按钮代码:
<input type="button" value="确定" />
接着是一个js脚本:我们假设Editor的ID是Editor1
<script language="javascript" type="text/javascript">
<!--
function insertEditor()
{
var editor = document.getElementById('<%=Editor1.ClientID %>');
var editorText = editor.getHTML();
WDDHY.EditMyPage.InsertEditor(editorText,onComplete);
}
function onComplete(ret)
{
if(ret.value=="OK")
{
alert("保存成功!");
}
else
{
alert("失败!");
}
}
//-->
</script>
我们再看服务器段的Ajax方法:
[AjaxPro.AjaxMethod]
public string InsertEditor(string insertStr)
{
string connStr = System.Configuration.ConfigurationManager.AppSettings["ConnString"].ToString();
SqlConnection conn = new SqlConnection(connStr);
string cmdStr = "insert into userContent(this_content,this_name) values(@content,@name)";
SqlCommand comm = new SqlCommand(cmdStr,conn);
//2005里面给参数赋值简单多拉!!
comm.Parameters.AddWithValue("@content", insertStr);
comm.Parameters.AddWithValue("@name","pwqzc");
conn.Open();
try
{
comm.ExecuteNonQuery();
return "OK";
}
catch
{
return "BAD";
}
finally
{
conn.Close();
}
运行,我们写点 内容到CuteEditor里面,点按钮,他一下就把数据插入进去拉!!!
/Files/hzuIT/CuteEditorDemo_51aspx.rar
当然首先这款编辑器，有的是直接下载.dll文件。我的资源中是破解版的，在bin目录下，请大家注意
现在介绍使用步骤：
1、将以下文件考贝到你站点根目录下的bin内(这编辑些在CuteEditor6.0/bin下都可以找到）
CuteEditor.dll
CuteEditor.ImageEditor.dll（6.0增加的EditorImage功能）
CuteEditor.lic（解密文件）
NetSpell.SpellChecker.dll（拼写检查功能）
注：（“.dic”为扩展名的文件是词典保存为纯文本文件的格式。将CuteEditor6.0/bin文件夹里的都拷到站点根目录下的bin内也可以）
2、将CuteSoft_Client文件夹拷贝到项目的相应目录.（CuteSoft_Client包含CuteEditor文件夹和example.css,放了控件图片,文件之类的数据example.css它指定了编辑器的样式）
注:FilesPath用来设置所对应的目录,如：FilesPath="~/admin/CuteSoft_Client/CuteEditor/"
3、在根目录下建立Uploads的文件夹作为上传图片及附件的根目录。
4、将CuteEditor.dll添加到工具箱
5、CuteEditor属性设置(假设当前页在根目录下)：
1)AutoConfigure设为simple,即选择最简单的界面显示方式
2)EditorWysiwygModecss设为：CuteSoft_Client/example.cs
3)FilesPath设为：CuteSoft_Client/CuteEditor
6、控件的调用代码如下：
<%@ Register TagPrefix="CE" Namespace="CuteEditor" Assembly="CuteEditor" %>
<CE:EDITOR id="Editor1" runat="server" Width="700px" FilesPath="~/CuteSoft_Client/CuteEditor/" EditorWysiwygModeCss="../example.css" ThemeType="Office2003_BlueTheme"></CE:EDITOR>
7、修改Web.config文件
<appSettings>
<add key="DictionaryFolder" value="bin" />
</appSettings>
<system.web>
<browserCaps>
tagwriter=System.Web.UI.HtmlTextWriter
</browserCaps>
</system.web>
注意：
1)可以修改CuteSoft_Client\CuteEditor\Configuration\AutoConfigure文件夹下的文件，改便CuteEditor工具栏按钮的显示或排列。
2)可以修改文件CuteSoft_Client\CuteEditor\Configuration\Shared\Common.config来添加字体。
3)可以修改CuteSoft_Client\CuteEditor\Configuration\Security文件夹中的Admin.config，Default.config，Guest.config来控制权限上传图片和文件的问题。
（在属性里设置：SecurityPolicyFile为这.config三个中的一种）
特别提醒一下：有的系统可能要设置一下保存图片和文件的文件夹的访问权限，把Uploads文件夹的安全中everyone用户改为写入即可。不然文件会上传不上去，因为没有写入权限。
8、出错总结：
出错1：无法为类型 CuteEditor.Editor 授予有效的许可证。有关详细信息，请与组件的制造商联系。
原因：可能缺少CuteEditor.lic文件，把CuteEditor.lic文件考贝到Bin目录下即可。
出错2：点击工具栏里的插入样板按钮弹出这样的错误页面：使用主题 css 文件要求页上有标头控件。(例如 <head runat="server" />)。
原因：Asp.net2.0引入Theme后，要求<Head>标签runat="server"而CuteEditor是1.1版本引起的。
解决办法：给CuteSoft_Client\CuteEditor夹下的template.aspx里的<Head>添加runat="server"能解决加载时闪过的错误。给CuteSoft_Client/CuteEditor/Help下的default.aspx里的<Head>添加能解决点击工具栏里的插入样板按钮也弹出的错误页面。若点击其他工具栏也弹出同样的错误，可以右键错误页面，查看该页面的路径，修改在CuteSoft_Client文件夹下对应的页面中的<Head>标签。
上传文件配置admin.config：
重命名为时间：<security name="UseTimeStampRenameUploadedFiles">true</security>
文件大小
文件格式
可修改CuteSoft_Client\CuteEditor\Configuration\AutoConfigure文件夹下的文件，改便CuteEditor工具栏按钮的显示或排列。
可修改文件CuteSoft_Client\CuteEditor\Configuration\Shared\Common.config来添加字体。
修改文件的上传目录
string path = "~/upload";
Editor1.SetSecurityGalleryPath(path);
步骤：1、将CuteEditor文件夹下bin文件夹里的CuteEditor.dl，CuteEditor.lic，CuteEditor.ImageEditor.dll （5.0增加的EditorImage功能）拷到项目的bin目录下。如果需要拼写检查功能则还要拷NetSpell.SpellChecker.dll，并修改web.config文件，如下
<appSettings>
<add key="DictionaryFolder" value="bin"/>
</appSettings>
（“.dic”为扩展名的文件是词典保存为纯文本文件的格式。将bin文件夹里的都拷到项目的bin目录下也可以）
2、将CuteEditor文件夹下CuteSoft_Client文件夹全部拷贝到应用程序的根目录下，并在项目根目录下建立一个uploads文件夹.
3、打开VS,在工具栏上点击右键-添加/移除项,在自定义工具箱中的.NET Framework组件,流览将 bin文件夹下的cuteEditor.dll文件引用，将Editor拖到页面即可
CuteEditor 5.0属性设置
1、插入数据库：Editor1.Text
2、文件夹设置： Imports System.IO（引入命名空间）
Dim str As String = Session("UserName")
Dim path As String = "~/UploadFile/" + str + ""
Dim fullPath As String
fullPath = Server.MapPath("UploadFile\") + str
**判断以UserName命名的文件夹是否存在，不存在则创建以UserName命名的文件夹
If Not Directory.Exists(fullPath) Then
Directory.CreateDirectory(fullPath)
End If
**将默认路径uploads改为“path”所表示的路径
Editor1.SetSecurityGalleryPath(path)
3、按纽设置：* 属性----外观----AutoConfigure
* 代码 Editor1.AutoConfigure = AutoConfigure.Simple
* CuteEditor文件夹HowTo目录下的AddButton例子
4、上传文件大小设置（以flash为例）：Dim kb As Int32 = 200
Editor1.SetSecurityMaxFlashSize(kb)
CuteEditor真的是一款很好的web在线编辑器,但是5.0的安装和以前的版本有点不同,5.0的破解版的下载地址是:http://www.seaskyer.net,下载完后解下压缩吧,这个地球人都知道.
我们在vs2005里面新建个web site吧.然后把CuteEditor添加到工具面板.我们在工具面板里面右键选择choose item,在出来的对话框里面选择browser,找到CuteEditor.dll,一路确定就可以拉.
我们再添加个edit.asxp,把工具面板里面的Editor拖到页面上来.这个时候那个授权文件CuteEditor.lic应该也自动的到了bin目录下,如果没有我们必须手动烤进去.这个时候我们如果直接编译的话还是不可以的,会提示错误,因为5.0增加了个EditorImage的功能啊,所以我们必须要把CuteEditor.ImageEditor.dll和NetSpell.SpellChecker.dll(烤这个的原因是默认打开拼写检查)都烤到项目的bin目录下,同时我们也要把解压缩后的CuteSoft_Client目录全部拷贝到应用程序的根目录下.这个时候编译的时候应该没有错误了,如果还出现什么windows集成身份验证的错误,那么我们要修改IIS里面的配置,在iis的这个站点的属性里面有个目录安全性,再点身份验证和访问控制的编辑,把集成windows身份验证前面的小勾打上就是啊.
上面的只是个最简单的安装,还有比如控制CueEditor的显示,已经安全性和那个什么上传的啊,还有控制用户上传的目录啊,或者给每个用户建个他们自己的图片目录啊,还必须要另外设置,如果可能我江另外写下.我们这里现在要开始用Ajax.Net来把CuteEditor的内容插入数据库拉.
关于如何安装Ajax.Net,请见我的另外的一骗文章:Ajax.Net快速入门
如何把CueEditor里面的内容用Ajax插入数据库呢?首先关键是获得CuteEditor的客户端ID,这个可以通过<%=Editor1.ClietID%>来获得.再就是如何在客户端获得Editor里面的内容.这个可以使用他的内在的JavaScript API,getHTML(),注意是HTML.下面是一个把CuteEditor的内容插入数据库的一个html按钮代码:
<input type="button" value="确定" />
接着是一个js脚本:我们假设Editor的ID是Editor1
<script language="javascript" type="text/javascript">
<!--
function insertEditor()
{
var editor = document.getElementById('<%=Editor1.ClientID %>');
var editorText = editor.getHTML();
WDDHY.EditMyPage.InsertEditor(editorText,onComplete);
}
function onComplete(ret)
{
if(ret.value=="OK")
{
alert("保存成功!");
}
else
{
alert("失败!");
}
}
//-->
</script>
我们再看服务器段的Ajax方法:
[AjaxPro.AjaxMethod]
public string InsertEditor(string insertStr)
{
string connStr = System.Configuration.ConfigurationManager.AppSettings["ConnString"].ToString();
SqlConnection conn = new SqlConnection(connStr);
string cmdStr = "insert into userContent(this_content,this_name) values(@content,@name)";
SqlCommand comm = new SqlCommand(cmdStr,conn);
//2005里面给参数赋值简单多拉!!
comm.Parameters.AddWithValue("@content", insertStr);
comm.Parameters.AddWithValue("@name","pwqzc");
conn.Open();
try
{
comm.ExecuteNonQuery();
return "OK";
}
catch
{
return "BAD";
}
finally
{
conn.Close();
}
运行,我们写点 内容到CuteEditor里面,点按钮,他一下就把数据插入进去拉!!!
