语言环境:多国语言;
特性功能:所见所得;支持平台众多;支持XHTML 1.0;文本格式设置;常见的编辑;复制、粘贴、撤销、文件上传等等功能;
授权方式:开源且免费;
官方地址:http://www.fckeditor.net/
下载地址:http://www.fckeditor.net/download/default.html
演示地址:http://www.fckeditor.net/demo/default.html
FCKeditor不仅加上了FLASH插入功能,而且它的兼容性超强:支持多种浏览器包括IE 5.5+、Firefox 1.0+、Mozilla 1.3、Netscape 7+;无平台限制,在Windows、Mac、Linux下都能运行;可以和多种WEB语言融合包括:ASP.Net、ASP、PHP、ColdFusion、Java、Perl;多语言支持自带47种语言包;开源且免费;最重要的是支持XHTML1.0标准。
对于ASP网站,FCKeditor可以直接拿过来用了,不需要进行什么修改,因为FCKeditor默认就是ASP的。但有些设置并不适合自己使用,昨天对FCKeditor进行简单的修改,以便在ASP.NET网站的使用,仅供参考。
一、准备工作
首先下载FCKeditor V2.4.3,下载地址:http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=75845;这个压缩包里并不包含ASP.NET要用到的DLL控件,所以还要下载另外一个压缩包,下载地址:http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=137125。把第一个文件解压到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;
余下的代码都按照以上操作,删掉其它WEB语言,只保留ASP.NET。也可以点这里下载我精简过的文件,注意:只适用于ASP.NET,其他语言勿下!建议先解压到别的目录,再复制到WEB目录相对应的位置,以免造成文件丢失。
改完后保存,FCKeditor已经完全支持ASP.NET了。当然还有一些安全问题,只要修改相应的toolbar,鼠标右键菜单等等,因为我的后台不面对前台用户的,即没有留言本和日记回复,所以略过这些步骤。下一步是打开VS.NET,在ASP.NET页面中加入FCKeditor。
四、ASP.NET中的应用
打开项目的“资源管理器”,在引用中去掉“FreeTextBox”引用;添加“FredCK.FCKeditorV2”引用。
打开添加文章、管理文章相对应的文件以修改其中的内容。下面以“添加文章”为例。切换到“HTML”界面,删掉原来FTB注册信息,添加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>
id可以自己命名,自己喜欢易记就行。如果程序中有检测输入是否为空的话,那么就不再是content.Text了,而是content.Value。
至此,文件修改完毕。所有代码如下:
<%@ Register TagPrefix="FCKeditorV2" Namespace="FredCK.FCKeditorV2" Assembly="FredCK.FCKeditorV2" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>AdminFileAdd</title>
<meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
<meta content="C#" name="CODE_LANGUAGE">
<meta content="JavaScript" name="vs_defaultClientScript">
<meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<LINK href="/admin.css" type="text/css" rel="stylesheet">
</HEAD>
<body class="right">
<form id="Form1" method="post" runat="server">
<div>添加文章</div>
<div class="main">
<ul>
<li>
标题:<asp:textbox id="title" runat="server" MaxLength="50" Width="250px"></asp:textbox>
<li>
栏目:<asp:dropdownlist id="m" runat="server" AutoPostBack="True"></asp:dropdownlist>
<li>
<FCKeditorV2:FCKeditor id="content" runat="server"></FCKeditorV2:FCKeditor>
<li>
<asp:button id="add" runat="server" Text="提 交"></asp:button>
</li>
</ul>
</div>
</form>
</body>
</HTML>
在安装中遇到的几个小问题:
1、 修改上传文件的默认位置
在FCKeditor中默认上传位置是/UserFiles/,怎样修改到自己的目录下呢?
可以修改在web.config中加上
<appSettings>
<add key="FCKeditor:UserFilesPath" value="/<自己的目录>/<自己的子目录>/" />
</appSettings>
就可以了
2、 因为上传文件创建目录需要权限,别忘了修改适当的权限。
3、 有许多选项可以通过修改fckconfig.js中对应得参数实现,详细的可以参考文档。
其它文件按照以上方法修改完毕之后,重新生成解决方案就大功告成了,接下来就慢慢感受FCKeditor带给你的震撼吧。还有一点要注意的是:如果你在用Windows XP SP2且启用了“弹出窗口阻止程序”,请把你的站点添加到“允许的站点”之中,不然插入图片或Flash时会提示脚本错误。
=====================================================================
FCKeditor 2.2 + Asp.Net 设置 (转)
FCKeditor相关资料简介:
官方文档http://wiki.fckeditor.net/
下载地址http://www.fckeditor.net/download/default.html
官方演示http://www.fckeditor.net/demo/default.html
针对于ASP.NET开发者来说,你有两种选择:
1. 只使用FCKeditor,下载http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=75845,然后自行配置其中的几个核心js文件。对此发开不作为本文所讨论的范畴。
2. 使用FCKeditor.Net,下载http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=137125。需要声明的是,这个文件只是一个ASP.NET控件DLL文件,并不包括FCKeditor的编辑器内核。所以你还应该下载上一种方式中提到的文件包。
下面结合一个ASP.NET2.0的项目来具体看看FCKeditor的安装、配置。在开始之前请先下载FCKeditor文件包和FCKeditor.Net 服务器控件。启用VS2005新建一个C#的WEB Site工程,取名FCKPro。
FCKeditor安装:
所谓安装就是一个简单的拷贝过程。
把下载的FCKeditor_2.2.zip文件包直接解压缩到FCKPro的根目录下,这样根目录下就得到一个FCKeditor文件夹,里面富含所有FCKeditor的核心文件。
然后把下载的FCKeditor.Net_2.2.zip随便解压缩到你硬盘的一个空目录,里面是FCKeditor.Net的源代码(基于.NET1.1的C#工程),你可以用VS2003来对它进行再度开发,本文尚不涉及本内容,我们只是直接使用FCKeditor.Net工程目录下的\bin\Release目录中的FredCK.FCKeditorV2.dll文件。
在VS2005中添加对FredCK.FCKeditorV2.dll的引用:
1. 在FCKPro工程浏览器上右键,选择添加引用(Add Reference…),找到浏览(Browse)标签,然后定位到你解压好的FredCK.FCKeditorV2.dll,确认就可以了。这时,FCKPro工程目录下就多了一个bin文件夹,里面包含FredCK.FCKeditorV2.dll文件。当然,你也可以完全人工方式的来做,把FredCK.FCKeditorV2.dll直接拷贝到FCKPro\bin\下面,VS2005在编译时会自动把它编译进去的。
2. 为了方便RAD开发,我们把FCKeditor控件也添加到VS的工具箱(Toolbox)上来,展开工具箱的常用标签组(General),右键选择组件(Choose Items…),在对话框上直接找到浏览按钮,定位FredCK.FCKeditorV2.dll,然后确认就可以了。这时工具箱呈现
我的经验告诉我,这样会省去很多在开发时使用FCKeditor控件时要添加的声明代码。
至此,你已经完成了FCKeditor的安装,并可以在你的项目中使用FCKeditor了,当然后面还有很多需要配置的东西。
FCKeditor在ASP.NET2.0 Web项目中的配置:
现在,我开始来把FCKeditor应用在我们的项目中。打开Default.aspx,切换到设计模式(Design),把FCKeditor控件从工具箱上拖动下来,在Default页上你就可以看到这个FCKeditor了,不过这时只能看到一个FCKeditor的站位框,不会看到运行时的效果,鼠标选中FCKeditor1后,在属性(Property)面板上可以设置这个FCKeditor对象的一些基本属性。比较重要的是BasePath属性,如果先前FCKeditor就定在了根目录的FCKeditor下,就设置成~/FCKeditor/,如果是别的目录名就换成相应的值(注意:控件默认值是/FCKeditor/,因为我们使用的是服务器控件设置了runat="server"属性所以要显式的声明BasePath="~/FCKeditor/")。把Default.aspx切换到源代码模式(Source),我们可以看到IDE自动生成的代码:
<%@ Register Assembly="FredCK.FCKeditorV2" Namespace="FredCK.FCKeditorV2" TagPrefix="FCKeditorV2" %>
<FCKeditorV2:FCKeditor ID="FCKeditor1" runat="server"></FCKeditorV2:FCKeditor>
如果当初没有把FCKeditor添加到工具箱上,那么应该在添加引用后自己手动来添加这些代码。
在源代码模式下,把鼠标点在FCKeditorV2:FCKeditor标签内容上,它会加粗显示,这时属性面板上显示出了FCKeditor服务器控件的全部属性,比在设计模式时多出了许多。
属性列表:
AutoDetectLanguage |
BaseHref |
BasePath |
ContentLangDirection |
CustomConfigurationsPath |
Debug |
DefaultLanguage |
EditorAreaCSS |
EnableSourceXHTML |
EnableViewState |
EnableXHTML |
FillEmptyBlocks |
FontColors |
FontFormats |
FontNames |
FontSizes |
ForcePasteAsPlainText |
ForceSimpleAmpersand |
FormatIndentator |
FormatOutput |
FormatSource |
FullPage |
GeckoUseSPAN |
Height |
ID |
ImageBrowserURL |
LinkBrowserURL |
PluginsPath |
runat |
SkinPath |
StartupFocus |
StylesXMLPath |
TabSpaces |
ToolbarCanCollapse |
ToolbarSet |
ToolbarStartExpanded |
UseBROnCarriageReturn |
Value |
Visible |
Width |
事件列表:
OnDataBinding |
OnDisposed |
OnInit |
OnLoad |
OnPreRender |
OnUnload |
以上属性和事件的使用在此不一一的赘述了,请先自行摸索一下,目前我也没找到相关资料,不过都不是很难,如果你有在asp下使用FCKeditor的经验,应该明白其中一些属性的意义,和fckconfig.js的设置项意义相同。以后有时间我会再把这部分整理好。需要说明的是FCKeditor2.2的fckconfig.js和2.0版本的有了较大改进,体积更小,配置方式也更加灵活,具体请自行下载比较。
针对这个示例我配置的代码如下:
<FCKeditorV2:FCKeditor
ID="FCKeditor1"
runat="server"
AutoDetectLanguage="false"
DefaultLanguage="zh-cn"
BasePath="~/FCKeditor/">
</FCKeditorV2:FCKeditor>
好,现在运行一下这个页面,允许修改Web.Config(这样IDE会自动在工程下添加一个Web.Config文件)。看到效果了吧!
有人会问:怎么得到一个HTTP Error 404 - Not Found.的错误呢?得到这个错误一般是BasePath没有设置正确,参看上述提到的BasePath注意事项仔细检查!
到了这里,FCKeditor的配置并没有真正的完成,因为它里面的一个强大功能我们还没正确配置:文件上传。
在Default.aspx的运行模式下,点FCKeditor的“插入/编辑图像”(又或者是Flash)功能,在弹出框点“浏览服务器”,又弹出一个对话框,此时随即出现的是一个错误提示框XML request error: Forbidden(403).
得到这样的错误有Web开发经验的都知道403应该是读写权限的问题。可是为什么呢?原因在于没有配置UserFiles路径。
我们在FCKPro根目录下,新建一个空目录Files。连同BasePath的设置通常的做法是这样的:
打开FCKPro工程的Web. Config文件,修改appSettings元素,配置如下:
<appSettings>
<add key="FCKeditor:BasePath" value="~/FCKeditor/"/>
<add key="FCKeditor:UserFilesPath" value="/FCKPro/Files" />
</appSettings>
设置了FCKeditor:BasePath后就不用再每次使用FCKeditor实例时指定BasePath属性了,FCKeditor:UserFilesPath则是制定我们所有上传的文件的所在目录。你也许会问为什么要设置成/FCKPro/Files这样而不是~/Files,因为FCKeditor使用这个值来返回你上传后的文件的相对路径到客户端,~/Files的形式是ASP.NET在服务可以编译解释的,但是在客户端的静态就不懂这是什么了。如果使用~/Files后,那么所有上传文件的返回路径都是~/Files形式的,你就会得到这样的链接http://~/Files/Image/logo.gif这样的链接解果就是路径为找到。所以才要我们上述那样设置,这是在开发阶段,如果在工程完成后发布时请记住把/FCKPro/Files改成/Files,道理不说大家也明白,开发阶段VS2005在运行项目时的URL是http://localhost/项目名称/的形式,发布后在Server上建立站点,跟路径就是http://www.abc.com/的形式了,所以发布后一定要改过来。这些地方是在使用FCKeditor2.2+ASP.NET2.0时经常发错误而又莫名其所云的地方。
先不要高兴,这个上传的功能至此还差最关键的一步。在FCKeditor所在根目录下(FCKPro/FCKeditor/)找到fckconfig.js文件,用文本编辑器打开,在大概132行(大概是因为之前您也许参考其它资料更改过这个文件了)的地方找到:
var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php
把这两行赋值代码的值由asp改成aspx,保存关闭这个文件。
好了,大功告成了!在此运行FCKPro项目,使用浏览服务器功能,OK了吧?
再提一下:
对于开发中使用文件上传功能遇到 XML request error: Internal Server Error(500) 错误的解决办法。
遇到500内部错误是怎么回事呢?
因为ASP.NET2.0新增了Theme功能,所以如果在你的工程中你对Web.config使用到了styleSheetTheme或theme的话那就要再多修改一下。
还是到FCKeditor所在的目录,分别打开\editor\filemanager\upload\aspx\upload.aspx和\editor\filemanager\browser\default\connectors\aspx\connector.aspx两个aspx文件,在page标签中添加Theme=""或StyleSheetTheme=""看你在工程使用的是什么就修改什么。修改后如下:
<%@ Page language="c#" Inherits="FredCK.FCKeditorV2.Uploader" AutoEventWireup="false" Theme="" %>
或
<%@ Page language="c#" Inherits="FredCK.FCKeditorV2.Uploader" AutoEventWireup="false" StylesheetTheme="" %>
这样就解决了500的内部错误