准备:首先下载程序包 (1):FCKeditor.Net包 和FCKeditor_2.X.X 版本包
http://www.fckeditor.net/
一、准备工作
首先下载FCKeditor V2.3.2 released,下载地址在上面。这个压缩包里并不包含.NET要用到的DLL控件,所以还要下载另外一个压缩包,下载地址在上面的控件地址里。把第一个文件解压到WEB根目录,默认文件夹名为:FCKeditor;再把第二个包解压,里面包含了源代码,如果你想自己再次开发,可以双击FredCK.FCKeditorV2.csproj文件,打开VS.NET进行修改,所用的语言是C#;不想修改的话,直接把bin\Release下面的FredCK.FCKeditorV2.DLL文件拷到WEB目录的bin下面。
二、精简文件
因为只用到ASP.NET,所以有必要精简一下文件。
进入FCKeditor文件夹,把所有“_”开头的文件和文件夹删掉,这些都是一些范例,只保留editor文件夹、fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml就可以了;
进入editor文件夹,删掉“_source”文件夹,里面放的同样是源文件;
退回上一级目录进入filemanager文件夹,有browser和upload两个文件夹。进入browser\default\connectors,只保留aspx文件夹,其余的删掉;mcpuk目录亦可删除;upload也一样,只保留aspx文件夹;
退到editor再进入images文件夹,smiley里面放的是表情图标,有msn和fun两个系列,如果你想用自己的表情图标,可以把它们都删除;如果你想用这里的表情图标那就不要删了;
lang里面放的是语言包,如果只是用简体中文,那么只保留fcklanguagemanager.js、zh-cn.js两个文件就行了,建议也保留en.js(英文)、zh.js(繁体中文)两个文件,fcklanguagemanager.js是语言配置文件,有了它才能和fckconfig.js里的设置成对,对应上相应的语言文件,一定要保留!
再退出lang文件夹,进入skins文件夹,如果你想使用FCKeditor默认的奶黄色,那就把除了default文件夹外的另两个文件夹直接删除,如果想用别的,那就看你自己的喜好了。
至此,文件精简完毕,由原来的2.55M变成现在的797K了。接着修改设置。
三、修改设置
打开位于根目录的fckconfig.js文件。FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;这行是设置皮肤的,如果精简时保留了silver,就把路径改成skins/silver,默认就不用管它了;FCKConfig.DefaultLanguage = 'en' ;设置默认语言,把en改成zh-cn,即简体中文;FCKConfig.TabSpaces = 0;如果在编辑过程中要用到TAB键,就把0改成1;
在。NET中应用就把FCKCONFIG。JS中的ASP改成ASPX(默认文件浏览器语言,快速上传语言)
改完后保存,FCKeditor已经完全支持ASP.NET了。当然还有一些安全问题,只要修改相应的toolbar,鼠标右键菜单等等,因为我的后台不面对前台用户的,即没有留言本和日记回复,所以略过这些步骤。下一步是打开VS.NET,在ASP.NET页面中加入FCKeditor。
四、ASP.NET中的应用
打开项目的“资源管理器”,添加“FredCK.FCKeditorV2”引用。新建一个页面,添加FCK的引用,代码如下:
<%@ Register TagPrefix="FCKeditorV2" Namespace="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" %>
并确保@ Page中的“AutoEventWireup”“validateRequest”两个值都为false,不然当你发表的文章中含有链接或是其他HTML语句时,.NET会警告你有安全隐患而出错。在form的适当位置加入FCKeditor控件,当然form一定要有“runat="server"”,代码如下:
<FCKeditorV2:FCKeditor id="content" runat="server"></FCKeditorV2:FCKeditor>
如果 插入图片会报错,请继续一下步骤:
fckeditor配置重点说明
1、目录放哪里都可以,首先配置该目录下的fckconfig.js文件,快捷方法是把asp都替换成aspx。
2、在web.config里加上
<appSettings>
<add key="FCKeditor:UserFilesPath" value="/fc/fserFiles/" />
<add key="FCKeditor:BasePath" value="/fc/FCKeditor/" />
</appSettings>
注意是:虚拟目录加fceditor的网站目录路径
3、把fckeditor的dll包引用到项目
4、最关键的一步是:在目录权限上把asp.net用户的权限给到最大
5、文件头引用命名空间
<%@ Register TagPrefix="fckeditorv2" Namespace="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" %>
6、引入fckeditor
<FCKeditorV2:FCKeditor id="FCKeditor1" basePath="./FCKeditor/" runat="server"></FCKeditorV2:FCKeditor></FONT>
7、如果还不行
到fckedor的editor/filemanager/browser/connectors/aspx/connectior.aspx 的头上引用包文件中加 Theme="",如下,还有就是upload.aspx文件,到browser目录的upload文件夹中找
<%@ Page language="c#" Inherits="FredCK.FCKeditorV2.FileBrowserConnector" AutoEventWireup="false" Theme="" %>
注意:
一:解决中文问题 除了在WEB。CONFIG中写入GB2312标识 还要在
FCKeditor/editor/filemanager/browser/default/frmresourceslist.html中把方法
Function openfile 里面的 seturl(fileurl) 改成seturl(escape(fileurl));
另外把editor目录下的DIALOG下的FCK――IMAGE和FCK――FLASH等里的
<metahttp-equivXXXXXXXXcharset=utf-8> 换成GB2312
二:使用的时候注意引用FCK的样式表和JS文件否则可能显示不正常或功能不正常
本文来自CSDN博客,转载请标明出处: http://blog.csdn.net/thomas_chen/archive/2007/12/24/1965023.aspx
一、集成方法
FCKeditor应用在ASP.NET上,需要两组文件,一组是FCKeditor本身,另一个是用于ASP.NET的FCKeditor控件(分为1.1和2.0两个版本,这里使用2.0版本)。
1. 将FCKeditor加入到项目中
解压FCKeditor编辑器,得到文件夹fckeditor,复制此文件夹到Web应用的项目下(也可以是子孙目录下)。
解压FCKeditor控件,在其子目录bin/Release/2.0下有一个程序集。在Web应用的项目中引用该程序集。
2. 在页面中使用FCKeditor
有两种方式。
(1)手工编码
在页面中加入ASP.NET指令:
<%@ Register Namespace="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
然后在需要的地方加入FCKeditor控件:
<FCKeditorV2:FCKeditor id="FCKeditor1" runat="server" />
(2)集成到Visual Studio工具箱
打开一ASP.NET页面,展开Toolbox,打开右键菜单,选择“Choose Items ...”,在出现的“Choose Toolbox Items”会话框的“.NET Framework Components”选项卡中选择“Browse”,找到并选中FCKeditor程序集,打开后回到“Choose Toolbox Items”窗口,点击“OK”,完成控件导入。
这时,在Toolbox的General分类下出现了一个名为FCKeditor的控件,可以像使用Visual Studio内置控件一样使用它。
3. 配置FCKeditor编辑器路径
在页面中,使用的是FCKeditor控件,该控件需要知道FCKeditor编辑器文件组的路径。有两种配置方法。
(1)配置web.config
在appSettings配置节中加入
<add key="FCKeditor:BasePath" value="~/PathOfFCKeditor/" />
使用这种配置方法后,对于项目中任何一个页面中用到的FCKeditor控件,都不用再配置其BasePath属性。
(2)直接对用到的FCKeditor控件进行配置
在页面代码中设置FCKeditor的属性BasePath为FCKeditor编辑器文件组的路径,或者在Page_Init事件处理器中设置其BasePath的值。
4. 配置FCKeditor编辑器文件上传路径
在web.config的appSettings配置节中加入
<add key="FCKeditor:UserFilesPath" value="~/YourUploadFilePath" />
这样,就完成了FCKeditor向ASP.NET页面的集成工作。
二、配置FCKeditor
按照FCKeditor的默认配置,可以完成一些常用的HTML可视化编辑工作,但在实际应用中,还需要对其做进一步的配置。FCKeditor控件的可配置属性不多,且配置后只能作用于一个单一实例。实际上,需要对FCKeditor编辑器文件组中的通用配置文件/fckconfig.js和 ASP.NET专用文件上传管理代码文件/editor/filemanager/connectors/aspx/config.ascx进行配置。
1. 配置控件语言
FCKeditor是自动探测浏览器所使用的语言编码的,其默认语言是英文。修改配置行"FCKConfig.DefaultLanguage = 'en';"为'zh-cn',采用中文为默认语言。
2. 配置控件应用技术
FCKeditor默认是用于php技术的。修改配置行"var _FileBrowserLanguage = 'php';"和"var _QuickUploadLanguage = 'php';"为'aspx',采用ASP.NET技术。
3. 配置Tab键
默认Tab键在FCKeditor中不可用,可以修改配置行"FCKConfig.TabSpaces = 0;"为1,启用Tab键。
4. 定制FCKeditor工具栏
FCKConfig提供两种工具栏配置。在配置行"FCKConfig.ToolbarSets["Default"] = [ ... ];"中定义了使用全部可用按钮的配置(作为工具栏的默认配置)。在配置行"FCKConfig.ToolbarSets["Basic"] = [ ... ];"中定义了一个精简按钮的工具栏配置。实际使用时,默认配置按钮太多,精简配置按钮又太少。因此需要定制工具栏。
配置值[ ... ]中是形式为[[v, v2, .., vN], '/', [ ... ],...](vN表示要显示的按钮名字,'/'表示之后的按钮组在下一行显示)的按钮分组的集合。如果不需要整个分组的按钮,那么就删掉该分组(形式为 [ , , ...]);如果只是不需要分组中的某个按钮,删掉该按钮。
5. 定制可用的文本字体
FCKeditor是外国人做的,默认使用的字体当然也是西文字体了。修改配置行"FCKConfig.FontNames = '...';",加入要使用的中文字体名,如宋体,楷体_GB2312等。
FCKConfig默认使用HTML字体关键字来表示可选的字体大小,这存在着不同浏览器显示效果不一致的问题。因此,建议修改配置行"FCKConfig.FontSizes = '...';",去掉字体关键字值,加入像素值或磅值。(当然,在网页里定义了全局样式表的话,就不需要修改这项设置了,但应该教会最终用户如何设置字体达到最佳显示效果。)
6. 启用文件上传
FCKeditor提供了非常强大和易用的文件上传功能,但是默认配置里,文件上传功能不可用,这是基于安全的考虑。但我认为访问安全性控制应该由程序来做,不应由控件来做。
在文件config.ascx中,修改CheckAuthentication()的返回值为true。如果希望上传具有多扩展名的文件,修改 SetConfig()中ForceSingleExtension的值为false。FCKeditor默认可以上传文件、图片、Flash和多媒体四种类型的文件,可以在SetConfig()中对AllowedTypes修改来增减允许的类型(这个类型可以在后面的 TypeConfig["TypeName"]中定义,比如在AllowedExtensions属性中定制本类型允许的上传文件扩展名,在 DeniedExtensions里定制不允许的上传文件扩展名)。
在文件fckconfig.js中,修改配置行"FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;"为FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=File&Connector=' + encodeURIComponent( FCKConfig.BasePath + 'filemanager/connectors/' + _FileBrowserLanguage + '/connector.' + _FileBrowserExtension ) ;";修改配置行"FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension ;"为"FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/connectors/' + _QuickUploadLanguage + '/upload.' + _QuickUploadExtension + '?Type=File' ;"。(在这个配置文件里,看起来似乎Type=File是作为默认参数的,但实际上不加这个参数的话,会出错。)
7. 其它配置
对于这两个配置文件中的配置属性,从名字上很容易知道它们所代表的含义,基本上都可以定制。但要注意,属性值的格式要正确。
三、将FCKeditor编辑器文件组ASP.NET化
FCKeditor编辑器文件组包含了用于它所支持的各种应用技术的文件,所以,对于ASP.NET应用来说,有很多文件是不需要的。
根目录下,只保留文件夹editor,文件fckconfig.js、fckeditor.js、fckpackager.xml、fckstyles.xml和fcktemplates.xml。
子目录editor/filemanager/connectors下,只保留文件夹aspx。
本文来自CSDN博客,转载请标明出处: http://blog.csdn.net/ELuYouNi/archive/2009/06/23/4291856.aspx
当Asp.Net 验证控件遇到FCKeditor
使用RequiredFieldValidator控件验证FCKeditor是否填写内容的时候会遇到一个问题,
填写了内容之后第一次提交还会提示没有填写内容,这是由于FCKEditor的编辑框采用的是Iframe,每次提交的时候首先要将Iframe的内容复制到文本框内,再提交,但是验证控件验证的是实际的文本框,在没触发提交时,这个内容文本框的内容实际上是空的。
换上自定义验证控件CustomValidator
设置ClientValidationFunction="checkFckeditorContent";
利用FCKeditor提供的Javascript API可以解决这个问题
http://docs.fckeditor.net/FCKeditor_2.x/Developers_Guide/JavaScript_API#Events
在页面上加入以下脚本
<script type="text/javascript">
//<![CDATA[
var fckeditorContentLength = 0;
function checkFckeditorContent(source, arguments)
{
arguments.IsValid = (fckeditorContentLength > 0);
}
function FCKeditor_OnComplete(editorInstance)
{
editorInstance.Events.AttachEvent('OnBlur', FCKeditor_OnBlur); //附加失去焦点的事件
}
function FCKeditor_OnBlur(editorInstance)
{
fckeditorContentLength = editorInstance.GetXHTML(true).length;
//在FCKeditor失去焦点时,如果内容不为空则隐藏验证提示
if(fckeditorContentLength > 0){
document.getElementById("<%= this.自定义验证控件.ClientID %>").style.display = "none";
}
}
//]]>
</script>
问题到此就解决了。
源出处: http://www.cnblogs.com/normren/archive/2009/05/06/aspnet-validator-fckeditor.html
asp.net 控件验证 FCKeditor发布:dxy 字体:[增加 减小] 类型:转载
FCKEditor是一个很不错的在线编辑器,可称得上完美,但是它有一个问题,就是在使用RequiredFieldValidator进行验证的时候,即使内容不为空,也需要点击两次才能完成
经过查找网上的资料,发现好像是它本身的一个问题,原文如下:
With ASP.Net, I need to submit twice when using the RequiredFieldValidator in a FCKeditor instance
FCKeditor will not work properly with the Required Field Validator when the "EnableClientScript" property of the validator is set to "true" (default). Due to a limitation in the default validation system, you must set it to "false".
If you want to do client side validation, you must use a Custom Validator instead and provide the appropriate validation function, using the FCKeditor JavaScript API.
译文如下(翻译的不好,大家能看懂就好):
问:为什么在使用ASP.NET的RequiredFieldValidator时,我需要提交两次
答:当RequiredFieldValidator的EnableClientScript属性被设置成true时,FCKEditor不能很好的支持RequiredFieldValidator,为了解除这个限制,你必须把这个属性设置成为false 如果你希望使用客户端验证,你必须使用Custom Validator制作一个非空验证来替换RequiredFieldValidator,在其中使用FCKeditor JavaScript API即可。
看了这篇文章,我就去找FCKeditor JavaScript API的文档,发现它为客户端JavaScript的调用提供了一些属性和方法,于是乎,就按上述的回答写了一段JavaScript脚本来完成了验证。
详细解决方法:首先添加Javascript脚本:
复制代码 代码如下:
script language="javascript" type="text/javascript">
var oEditer;
function CustomValidate(source, arguments)
{
var value = oEditer.GetXHTML(true);
if(value=="")
{
arguments.IsValid = false;
}
else
{
arguments.IsValid = true;
}
}
function FCKeditor_OnComplete( editorInstance )
{
oEditer = editorInstance;
}
</script>
`然后添加CustomValidator,设置ClientValidationFunction="CustomValidate",注意千万别忘了ValidateEmptyText="True",否则不起作用!
这样,再试试,OK,一次就可以直接提交了,不会出现提交两次的bug了
本文来自: 脚本之家( www.jb51.net) 详细出处参考: http://www.jb51.net/article/18676.htm
本文来自CSDN博客,转载请标明出处: http://blog.csdn.net/guopengzhang/archive/2009/10/24/4721784.aspx