FCKeditor相关内容简介：
不完全攻略及使用
使用FCKeditor2.2图片上传的小技巧
精简：
编译dll
文件上传部分管理部分
官方使用说明（中文）
不完全攻略及使用：
作者：任搏软
Website：http://www.wrestsoft.com
技术Blog：http://dsclub.cnblogs.com
My Space：http://www.myspace.com/dsclub
QQ：9967030
前几天写了一篇关于基于ASP.NET2.0的FCKeditor的使用心得，由于不少网友要求再写得详细些，今天再总结续写一些。本文所示用的FCKeditor版本是FCKeditor2.2，截至目前这个是最新版本。
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的内部错误。不是对应，而是空值！！！！！！！！！！
使用FCKeditor2.2图片上传的小技巧
之前没做过图片上传，最近要做个产品发布的小东西，使用ASP.NET2.0的文件上传组件老是出问题。考虑到FCKeditor中的图片上传功能不错，而且有浏览服务器文件的功能，所以就直接拿来用了。下面实现了不修改FCKeditor本身的任何代码，对FCKeditor的文件浏览器加以利用。
首先，放一个TextBox和Button。TextBox当然是放图片文件路径的，Button按钮用于浏览服务器：
<asp:TextBox ID="txt_PicUrl_Insert" runat="server" MaxLength="100" Width="280px"></asp:TextBox>
<input id="btn_OpenFileBrowser_Insert" onclick="openFileBrowser('/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/aspx/connector.aspx',800,600);" type="button" value="浏览服务器" />
在点击Button的时候执行打开FCKeditor图片浏览器窗口的一个javascript方法：openFileBrowser()。
该方法代码：
function openFileBrowser(url, width, height )
{
var iLeft = ( window.ScreenWidth - width ) / 2 ;
var iTop = ( window.ScreenHeiht - height ) / 2 ;
var sOptions = "toolbar=no,status=no,resizable=yes,dependent=yes" ;
sOptions += ",width=" + width ;
sOptions += ",height=" + height ;
sOptions += ",left=" + iLeft ;
sOptions += ",top=" + iTop ;
var oWindow = window.open( url, '服务器文件浏览', sOptions ) ;
}
另/FCKeditor/editor/filemanager/browser/default/browser.html为图片浏览器的路径，Type=Image&Connector=connectors/aspx/connector.aspx为FCKeditor必需的参数。
然后，在浏览服务器的过程中，选择了需要的文件，需要把值赋给TextBox(txt_PicUrl_Insert),
这里又需要写一个javascript 方法SetUrl( )，注意该方法必须是下面的参数格式，并且方法名不能改成其他的：
function SetUrl( url, width, height, alt )
{
if(document.getElementById('txt_PicUrl_Insert')!=null)
{
document.getElementById('txt_PicUrl_Insert').value = url ;
}
else
{
alert("对象赋值失败：对象不存在！");
}
//注意该方法不仅传如了文件的URL地址，还传入了另外三个参数，width,height,alt，如果需要的话可以加以利用。这里虽然没使用，但也不能删除掉。
}
精简：
下载下来的文件中包含了几个文件夹和各种后缀的fckeditor文件，其中以下划线开头的文件都可以删掉以节省空间，另外，其他一些与我们应用无关的文件也都可以删掉，最后就剩下如下图所示的几个文件。
编译dll
Web工程目录demo，解压FCKeditor_2.2.zip，保存在demo/FCKeditor下。用户上传文件目录demo/UserFiles。
1，设置
editor.LinkBrowserURL = Request.ApplicationPath + "/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/aspx/connector.aspx";
editor.ImageBrowserURL = Request.ApplicationPath + "/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/aspx/connector.aspx";
2，解压FCKeditor.Net_2.2.zip，修改其中的文件重新生成dll文件
2.1修改FCKeditor.cs中的basepath属性
[ DefaultValue( "~/FCKeditor/" ) ] public string BasePath
{
get 
{ 
object o = ViewState["BasePath"] ; if ( o == null ) o = System.Configuration.ConfigurationManager.AppSettings["FCKeditor:BasePath"] ; return ( o == null ? "~/FCKeditor/" : (string)o ) ;
} set { ViewState["BasePath"] = value ; }
} 2.2修改FileWorkerBase.cs增加成员变量private const string DEFAULT_USER_FILES_DIR = "/UserFiles/";
增加属性
protected string UserFilesDirectoryForUpload { get { return Server.MapPath(DEFAULT_USER_FILES_DIR); } } 在UserFilesPath属性中增加return Request.ApplicationPath + DEFAULT_USER_FILES_DIR;
2.3修改Uploader.cs将string sFilePath = System.IO.Path.Combine(this.UserFilesDirectory, sFileName);改为string sFilePath = System.IO.Path.Combine(this.UserFilesDirectoryForUpload, sFileName);
3，解决FCKEditor上传时中文文件名的方法
主要是修改文件frmUpload.html文件.修改方法是:先把frmUpload.html文件重新命名,然后添加一个aspx页面文件,把上面的内容复制到aspx页面文件中,最后把新添加的aspx文件后缀改为html即可.修改后的文件内容如下:
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<link href="browser.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/common.js"></script>
<script language="javascript">
function SetCurrentFolder( resourceType, folderPath )
{
var sUrl = oConnector.ConnectorUrl +'Command=FileUpload' ;
sUrl += '&Type=' + resourceType ;
sUrl += '&CurrentFolder=' + folderPath ;
document.getElementById('frmUpload').action = sUrl ;
}
function OnSubmit()
{
if ( document.getElementById('NewFile').value.length == 0 )
{
alert( '请从你的计算机上选择一个文件。' ) ;
return false ;
}
// Set the interface elements.
document.getElementById('eUploadMessage').innerHTML = '把新文件上传到当前文件夹(上传中，请等待...)' ;
document.getElementById('btnUpload').disabled = true ;
return true ;
}
function OnUploadCompleted( errorNumber, fileName )
{
// Reset the Upload Worker Frame.
window.parent.frames['frmUploadWorker'].location = 'about:blank' ;
// Reset the upload form (On IE we must do a little trick to avout problems).
if ( document.all )
document.getElementById('NewFile').outerHTML = '<input id="NewFile" name="NewFile" style="WIDTH: 100%" type="file">' ;
else
document.getElementById('frmUpload').reset() ;
// Reset the interface elements.
document.getElementById('eUploadMessage').innerHTML = '把新文件上传到当前文件夹。' ;
document.getElementById('btnUpload').disabled = false ;
switch ( errorNumber )
{
case 0 :
window.parent.frames['frmResourcesList'].Refresh() ;
break ;
case 201 :
window.parent.frames['frmResourcesList'].Refresh() ;
alert( '同名文件已经存在，新文件已经被重新命名为 "' + fileName + '"' ) ;
break ;
case 202 :
alert( '无效的文件' ) ;
break ;
default :
alert( '上传文件发生错误，错误号: ' + errorNumber ) ;
break ;
}
}
window.onload = function()
{
window.top.IsLoadedUpload = true ;
}
</script>
</head>
<body bottomMargin="0" topMargin="0">
<form id="frmUpload" action="" target="frmUploadWorker" method="post" enctype="multipart/form-data" lang ="zh-cn" onsubmit="return OnSubmit();">
<table height="100%" cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td nowrap>
<span id="eUploadMessage">把新文件上传到当前文件夹</span><br>
<table cellSpacing="0" cellPadding="0" width="100%" border="0">
<tr>
<td width="100%"><input id="NewFile" name="NewFile" style="WIDTH: 100%" type="file"></td>
<td nowrap> <input id="btnUpload" type="submit" value="上传"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
</body>
</html>
FCKed 的文件上传默认是不改名的，本地的文件名是什么，上传后保留原来的文件名；如果存在同名文件，则会被自动在文件名后面加 (n) 来标识。但是如果原文件名中包含有空格或标点，则有可能会出现能上传但不能引用的情况。我们可以通过修改，让 FCKeditor 自动生成不重复且不含非法字符的文件名，思路是根据精确到秒的上传时间来命名，然后存放在服务器上。
For ASP.NET 的修改相对其他语言较麻烦一些，上传部分都编译到 DLL 文件里面了，只能通过修改源代码，再重新编译后方能使用。上传其实分2部分，一是“快速上传”，即在网页对话框中点“上传”标签后出来的界面，通过这里上传的文件都会存放在 UserFiles 根目录，如下图： 
还有一个上传在点击“浏览服务器”后出来的界面中，我称之为“选择性上传”，这部分上传的文件则会根据用户选择的不同资源存放在相应的目录，或是 Image 或是 Flash、File等等。
用 VS.NET 打开 FredCK.FCKeditorV2.csproj，打开 Uploader.cs 文件，通过文件开头的注释：This is the code behind of the uploader.aspx page used for Quick Uploads.可以得知该文件是控制“快速上传”的，找到以下代码：
int iCounter = 0 ;
while ( true )
{
string sFilePath = System.IO.Path.Combine( this.UserFilesDirectory, sFileName ) ;
if ( System.IO.File.Exists( sFilePath ) )
{
iCounter++ ;
sFileName =
System.IO.Path.GetFileNameWithoutExtension( oFile.FileName ) +
"(" + iCounter + ")" +
System.IO.Path.GetExtension( oFile.FileName ) ;
iErrorNumber = 201 ;
}
else
{
oFile.SaveAs( sFilePath ) ;
sFileUrl = this.UserFilesPath + sFileName ;
break ;
}
}
大意是如果存在同名文件则在文件名后加入 (n) 来标识，否则以原文件名保存。把它改成不论有没有同名文件，都重新生成一个新的文件名。修改后的代码变成：
while (true)
{
// Rebuild file name. System.Random r = new Random(); int filerandom = r.Next(1000, 9999); //之间的整型随机数 sFileName = DateTime.Now.ToString().Replace("-", "").Replace(" ", "").Replace(":", "") + filerandom + System.IO.Path.GetExtension(oFile.FileName); string sFilePath = System.IO.Path.Combine(this.UserFilesDirectory, sFileName); oFile.SaveAs(sFilePath); sFileUrl = this.UserFilesPath + sFileName; break;
}
DataTime.Now.ToString()是获取当前时间并转换为字符串，得到的结果以 YYYY-MM-DD HH:MM:SS 的形式出现，用 Replace 把其中的分隔符及空格替换掉；再加上原文件的扩展名，“快速上传”修改完成。上传后的文件以 2005126152012.jpg 的命名方式存放到服务器上。
再打开 FileBrowserConnector.cs 文件，找到 Command Handlers 区中的 FileUpload 函数段，同样是修改 while 语句中的内容：
int iCounter = 0 ;
while ( true )
{
string sFilePath = System.IO.Path.Combine( sServerDir, sFileName ) ;
if ( System.IO.File.Exists( sFilePath ) )
{
iCounter++ ;
sFileName =
System.IO.Path.GetFileNameWithoutExtension( oFile.FileName ) +
"(" + iCounter + ")" +
System.IO.Path.GetExtension( oFile.FileName ) ;
sErrorNumber = "201" ;
}
else
{
oFile.SaveAs( sFilePath ) ;
break ;
}
}
把它改成：
while (true) { // Rebuild file name. System.Random r = new Random(); int filerandom = r.Next(1000, 9999); //之间的整型随机数 sFileName = DateTime.Now.ToString().Replace("-", "").Replace(" ", "").Replace(":", "") + filerandom + System.IO.Path.GetExtension(oFile.FileName); string sFilePath = System.IO.Path.Combine(sServerDir, sFileName); oFile.SaveAs(sFilePath); break; }
因为不再使用 iCounter 变量，所以一并去除。保存文件，重新生成解决方案；打开网站项目，在引用中删除原来的 FredCK.FCKeditorV2，再把刚才生成的 FredCK.FCKeditorV2.dll 文件复制到网站 bin 目录下，重新添加引用、生成，就大功告成了。
文件的命名方式只是个人喜好，也许有人觉得如此只有数字串的名称反而更不直观；重新编译生成的 FredCK.FCKeditorV2.dll 就不提供了……
文件上传部分管理部分
着重讲一下对上传文件部分的定制，适用于高级用户。
第一部分，装自己定制的插件，实现模板标签（开源的东西就有这点好处，随心所欲地修改），打开fckconfig.js文件找到
FCKConfig.PluginsPath = FCKConfig.BasePath + 'plugins/' ;
// FCKConfig.Plugins.Add( 'placeholder', 'en,it' ) ;
去掉//后，就相当于把placeholder这个插件功能加上了，fckeditor的插件文件都在/editor/plugins/文件夹下分类按文件夹放置的，对于fckeditor2.0来说，里面有两个文件夹，也就是有两个官方插件，placeholder这个文件夹就是我们刚才加上去的，主要用于多参数或单参数自定义标签的匹配，这个在制作编辑模板时非常管用，要想看具体实例的话，大家可以去下载acms这个系统查看学习，另一个文件夹tablecommands就是编辑器里的表格编辑用到的了。当然，如果你想制作自己其它用途的插件，那就只要按照fckeidtor插件的制作规则制作完放置在/editor/plugins/下就行，然后再在fckeidtor.js里再添加FCKConfig.Plugins.Add('Plugin Name',',lang,lang');就可以了。
第二部分 ，如何让编辑器一打开的时候，编辑工具条不出现，等点“展开工具栏”时才出现？Easy，FCKeditor本身提供了这个功能啦，打开fckconfig.js，找到
FCKConfig.ToolbarStartExpanded = true ;
改成
FCKConfig.ToolbarStartExpanded = false ;
就可以啦！
第三部分，使用自己的表情图标，同样打开fckcofnig.js到最底部那一段
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/' ;
FCKConfig.SmileyImages = ['regular_smile.gif','sad_smile.gif','wink_smile.gif'] ;
FCKConfig.SmileyColumns = 8 ;
FCKConfig.SmileyWindowWidth = 320 ;
FCKConfig.SmileyWindowHeight = 240 ;
上面这段已经是我修改过的了，为了我发表此文的版面不会被撑得太开，我把FCKConfig.SmileyImages那一行改得只有三个表情图了。
第一行，当然是表情图标路径的设置，第二行是相关表情图标文件名的一个List，第三行是指弹出的表情添加窗口最每行的表情数，下面两个参数是弹出的模态窗口的宽和高喽。
第四部分，文件上传管理部分
此部分可能是大家最为关心的，上一篇文章简单的讲了如何修改来上传文件以及使用fckeidtor2.0才提供的快速上传功能。再我们继续再深层次的讲解上传功能
FCKConfig.LinkBrowser = true ;
FCKConfig.ImageBrowser = true ;
FCKConfig.FlashBrowser = true ;在fckconfig.js找到这三句，这三句不是连着的哦，只是我把他们集中到这儿来了，设置为true的意思就是允许使用fckeditor来浏览服务器端的文件图像以及flash等，这个功能是你插入图片时弹出的窗口上那个“浏览服务器”按钮可以体现出来，如果你的编辑器只用来自己用或是只在后台管理用，这个功能无疑很好用，因为他让你很直观地对服务器的文件进行上传操作。但是如果你的系统要面向前台用户或是像blog这样的系统要用的话，这个安全隐患可就大了哦。于是我们把其一律设置为false;如下
FCKConfig.LinkBrowser = false ;
FCKConfig.ImageBrowser = false ;
FCKConfig.FlashBrowser = false ;
这样一来，我们就只有快速上传可用了啊，好！接下来就来修改，同样以asp为范例进行，进入/editor/filemanager/upload/asp/打开config.asp，修改
ConfigUserFilesPath = "/UserFiles/"这个设置是上传文件的总目录，我这里就不动了，你想改自己改了
好，再打开此目录下的upload.asp文件，找到下面这一段
Dim resourceType
If ( Request.QueryString("Type") <> "" ) Then
resourceType = Request.QueryString("Type")
Else
resourceType = "File"
End If
然后再在其后面添加
ConfigUserFilesPath = ConfigUserFilesPath & resourceType &"/"& Year(Date()) &"/"& Month(Date()) &"/"
这样的话，上传的文件就进入“/userfiles/文件类型（如image或file或flash)/年/月/”这样的文件夹下了，这个设置对单用户来用已经足够了，如果你想给多用户系统用，那就这样来改
ConfigUserFilesPath = ConfigUserFilesPath & Session("username") & resourceType &"/"& Year(Date()) &"/"& Month(Date()) &"/"
这样上传的文件就进入“/userfiles/用户目录/文件类型/年/月/”下了，当然如果你不想这么安排也可以修改成别的，比如说用户目录再深一层等，这里的Session("username")请根据自己的需要进行修改或换掉。
上传的目录设置完了，但是上传程序还不会自己创建这些文件夹，如果不存在的话，上传不会成功的，那么我们就得根据上面的上传路径的要求进行递归来生成目录了。
找到这一段
Dim sServerDir
sServerDir = Server.MapPath( ConfigUserFilesPath )
If ( Right( sServerDir, 1 ) <> "\" ) Then
sServerDir = sServerDir & "\"
End If
把它下面的这两行
Dim oFSO
Set oFSO = Server.CreateObject( "Scripting.FileSystemObject" )
用下面这一段代码来替换
dim arrPath,strTmpPath,intRow
strTmpPath = ""
arrPath = Split(sServerDir, "\")
Dim oFSO
Set oFSO = Server.CreateObject( "Scripting.FileSystemObject" )
for intRow = 0 to Ubound(arrPath)
strTmpPath = strTmpPath & arrPath(intRow) & "\"
if oFSO.folderExists(strTmpPath)=false then
oFSO.CreateFolder(strTmpPath)
end if
next
用这段代码就可以生成你想要的文件夹了，在上传的时候自动生成。
好了，上传文件的修改到现在可以暂时告一段落了，但是，对于中文用户还存在这么个问题，就是fckeditor的文件上传默认是不改名的，同时还不支持中文文件名，这样一来是上传的文件会变成“.jpg”这样的无法读的文件，再就是会有重名文件，当然重名这点倒没什么，因为fckeditor会自动改名，会在文件名后加（1）这样来进行标识。但是，我们通常的习惯是让程序自动生成不重复的文件名
在刚才那一段代码的下面紧接着就是
' Get the uploaded file name.
sFileName = oUploader.File( "NewFile" ).Name
看清楚了，这个就是文件名啦，我们来把它改掉，当然得有个生成文件名的函数才行，改成下面这样
'//取得一个不重复的序号
Public Function GetNewID()
dim ranNum
dim dtNow
randomize
dtNow=Now()
ranNum=int(90000*rnd)+10000
GetNewID=year(dtNow) & right("0" & month(dtNow),2) & right("0" & day(dtNow),2) & right("0" & hour(dtNow),2) & right("0" & minute(dtNow),2) & right("0" & second(dtNow),2) & ranNum
End Function
' Get the uploaded file name.
sFileName = GetNewID() &"."& split(oUploader.File( "NewFile" ).Name,".")(1)
这样一来，上传的文件就自动改名生成如20050802122536365.jpg这样的文件名了，是由年月日时分秒以及三位随机数组成的文件名了。
官方使用说明（中文）：
性能
首先,FCKEDITOR的性能是非常好的,用户只需很少的时间就可以载入FCKEDITOR所需文件.对于其他在线编辑器来说,这几乎是个很难解决的难题,因为在开启编辑器时需要装载太多的文件.比如CUTEEDITOR,虽然功能比FCKEDITOR还要强大,可是,它本身也够庞大了,至于FREETEXTBOX等,其易用性与FCKEDITOR相比,尚有差距,可以说,FCKEDITOR是一个别具匠心的在线编辑器,它里面融入了作者高深的面向对象的JAVASCRIPT功力,集易用性与强大的功能与一体.
.与编辑器相关的所有图像,脚本以及调用页
.语言文件
.编辑器的皮肤文件
.工具样的贴图等
这些将导致在服务器和客户端间产生相当的流量.如果有许多文件被调用,那么即便每个文件很小.也会让用户等得不耐烦.
在2.0版中,开发人员有两种方法来解决这个问题.
那就是指定装载顺序和脚本压缩
装载顺序
从2.0版开始,编辑器按以下步骤装载资源:
.基本页(就是编辑器所在页)以及装入编辑器的JS脚本
.用来建立编辑器的脚本
.编辑器的语言和皮肤.
.建立编辑器.
.载入预置的编辑文档内容.
.从现在开始,用户可以阅读和编辑文档了,不过,拖拽支持以及工具栏都是不可用的
.载入编辑器引擎脚本
.建立工具栏,并且可用
.从现在开始,编辑器的所有功能都已经完整
.载入工具栏图标
脚本压缩
在打包任何新版本时,编辑器的JS脚本将会进行预处理.预处理步骤如下:
.移除所有代码注释
.移除所有无用的空白字符.
.将脚本合并成几个文件
使用上面的方法,我们可以将脚本文件的大小压缩到原来的50%.
压缩后,原始的代码仍然存在于一个名为_Source的文件夹中
如何打包?
编辑器已经自带了打包程序,它位于FCKEDITOR的根文件夹中_PACKAGER文件夹中,名为Fckeditor.Packager.exe,将其复制到FCKEDITOR根文件夹中并运行,即可自动将JS脚本打包并压缩
需要注意的是该程序是一个.NET程序,必须安装.NET FRAMEWORK才能使用
想要获取支持?
如果你捐赠15000欧元,你就可以获得1年的免费技术支持(比较贵的说,相当于人民币15万,不过西欧的费用相当惊人)
如何安装?
1.下载最新版的FCKEDITOR
2.解压缩到你的站点根文件夹中名为FCKEDITOR的文件夹中(名称必须为FCKEDITOR,因为配置文件中已经使用此名称来标示出FCKEDITOR的位置)
3.现在,编辑器就可以使用了,如果想要查看演示,可以按下面方法访问:
http://<your-site>/FCKeditor/_samples/default.html
注意:你可以将FCKEDITOR放置到任何文件夹,默认情况下,将其放入到FCKEDITOR文件夹是最为简单的方法.如果你放入的文件夹使用别的名称,请修改配置文件夹中编辑器BasePath参数,如下所示:
oFckeditor.BasePath="/Components/fckeditor/";
另外,FCKEDITOR文件夹中所有以下划线开头的文件夹及文件,都是可选的,可以安全的从你的发布中删除.它们并不是编辑器运行时必需的
如何将FCKEDITOR整合进我的页面?
由于目前的版本提供的FCKEDITOR仅提供了JAVASCRIPT式的整合,因此,这里仅讲述如何应用JAVASCRIPT来整合FCKEDITOR到站点中,当然,其他各种语言的整合,你可以参考_samples文件夹中的例子来完成
1,假如编辑器已经安装在你的站点的/FCKEDITOR/文件夹下.那么,第一步我们需要做的就是在页面的HEAD段中放入SCRIPT标记以引入JAVASCRIPT整合模块.例如:
<script type="text/javascript" src="/fckeditor/fckeditor.js"></script>
其中路径是可更改的
2,现在,FCKEDITOR类已经可以使用了.有两个方法在页面中建立一个FCKEDITOR编辑器:
方法1:内联方式(建议使用):在页面的FORM标记内需要插入编辑器的地方置入以下代码:
script type="text/javascript">
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Create() ;
</script>
方法2:TEXTAREA标记替换法(不建议使用):在页面的ONLOAD事件中,添加以下代码以替换一个已经存在的TEXTAREA标记
<html>
<head>
<script type="text/javascript">
window.onload = function()
{
var oFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.ReplaceTextarea() ;
}
</script>
</head>
<body>
<textarea id="MyTextarea" name="MyTextarea">This is <b>the</b> initial value.</textarea>
</body>
</html>
3.现在,编辑器可以使用了
FCKEDITOR类参考:
下面是用来在页面中建立编辑器的FCKEDITOR类的说明
构造器:
FCKeditor( instanceName[, width, height, toolbarSet, value] )
instanceName:编辑器的唯一名称(相当于ID)
WIDTH:宽度
HEIGHT:高度
toolbarSet:工具条集合的名称
value:编辑器初始化内容
属性:
instanceName:编辑器实例名
width:宽度,默认值为100%
height:高度,默认值是200
ToolbarSet:工具集名称,参考FCKCONFIG.JS,默认值是Default
value:初始化编辑器的HTML代码,默认值为空
BasePath:编辑器的基路径,默认为/Fckeditor/文件夹,注意,尽量不要使用相对路径.最好能用相对于站点根路径的表示方法,要以/结尾
CheckBrowser:是否在显示编辑器前检查浏览器兼容性,默认为true
DisplayErrors:是否显示提示错误,默为true;
集合:
Config[Key]=value;
这个集合用于更改配置中某一项的值,如
oFckeditor.Config["DefaultLanguage"]="pt-br";
方法:
Create()
建立并输出编辑器
RepaceTextArea(TextAreaName)
用编辑器来替换对应的文本框
如何配置FCKEDITOR?
FCKEDITOR提供了一套用于定制其外观,特性及行为的设置集.主配置文件名为Fckconfig.js
你既可以编辑主配置文件,也可以自己定义单独的配置文件.配置文件使用JAVASCRIPT语法.
修改后,在建立编辑器时,可以使用以下语法:
var oFCKeditor = new FCKeditor( 'FCKeditor1' ) ;
oFCKeditor.Config['CustomConfigurationsPath'] = '/myconfig.js' ;
oFCKeditor.Create() ;
提醒:当你修改配置后,请清空浏览器缓存以查看效果
配置选项:
AutoDetectLanguage=true/false 自动检测语言
BaseHref="" 相对链接的基地址
ContentLangDirection="ltr/rtl" 默认文字方向
ContextMenu=字符串数组,右键菜单的内容
CustomConfigurationsPath="" 自定义配置文件路径和名称
Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容
DefaultLanguage="" 缺省语言
EditorAreaCss="" 编辑区的样式表文件
EnableSourceXHTML=true/false 为TRUE时,当由可视化界面切换到代码页时,把HTML处理成XHTML
EnableXHTML=true/false 是否允许使用XHTML取代HTML
FillEmptyBlocks=true/false 使用这个功能,可以将空的块级元素用空格来替代
FontColors="" 设置显示颜色拾取器时文字颜色列表
FontFormats="" 设置显示在文字格式列表中的命名
FontNames="" 字体列表中的字体名
FontSizes="" 字体大小中的字号列表
ForcePasteAsPlainText=true/false 强制粘贴为纯文本
ForceSimpleAmpersand=true/false 是否不把&符号转换为XML实体
FormatIndentator="" 当在源码格式下缩进代码使用的字符
FormatOutput=true/false 当输出内容时是否自动格式化代码
FormatSource=true/false 在切换到代码视图时是否自动格式化代码
FullPage=true/false 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
GeckoUseSPAN=true/false 是否允许SPAN标记代替B,I,U标记
IeSpellDownloadUrl=""下载拼写检查器的网址
ImageBrowser=true/false 是否允许浏览服务器功能
ImageBrowserURL="" 浏览服务器时运行的URL
ImageBrowserWindowHeight="" 图像浏览器窗口高度
ImageBrowserWindowWidth="" 图像浏览器窗口宽度
LinkBrowser=true/false 是否允许在插入链接时浏览服务器
LinkBrowserURL="" 插入链接时浏览服务器的URL
LinkBrowserWindowHeight=""链接目标浏览器窗口高度
LinkBrowserWindowWidth=""链接目标浏览器窗口宽度
Plugins=object 注册插件
PluginsPath="" 插件文件夹
ShowBorders=true/false 合并边框
SkinPath="" 皮肤文件夹位置
SmileyColumns=12 图符窗列数
SmileyImages=字符数组 图符窗中图片文件名数组
SmileyPath="" 图符文件夹路径
SmileyWindowHeight 图符窗口高度
SmileyWindowWidth 图符窗口宽度
SpellChecker="ieSpell/Spellerpages" 设置拼写检查器
StartupFocus=true/false 开启时FOCUS到编辑器
StylesXmlPath="" 设置定义CSS样式列表的XML文件的位置
TabSpaces=4 TAB键产生的空格字符数
ToolBarCanCollapse=true/false 是否允许展开/折叠工具栏
ToolbarSets=object 允许使用TOOLBAR集合
ToolbarStartExpanded=true/false 开启是TOOLBAR是否展开
UseBROnCarriageReturn=true/false 当回车时是产生BR标记还是P或者DIV标记
如何自定义样式列表呢?
FCKEDITOR的样式工具栏中提供了预定义的样式,样式是通过XML文件定义的,默认的XML样式文件存在于FCkEditor根文件夹下的FckStyls.xml文件中
这个XML文件的结构分析如下:
<?xml version="1.0" encoding="utf-8" ?>
<Styles >
<Style name="My Image" element="img">
<Attribute name="style" value="padding: 5px" />
<Attribute name="border" value="2" />
</Style >
<Style name="Italic" element="em" />
<Style name="Title" element="span">
<Attribute name="class" value="Title" />
</Style >
<Style name="Title H3" element="h3" />
</Styles>
每一个STYLE标记定义一种样式,NAME是显示在下拉列表中的样式名,ELEMENT属性指定此样式所适用的对象,因为FCKEDITOR中的样式是上下文敏感的,也就是说,选择不同的对象,仅会显示针对这类对象定义的样式
拼写检查
FCKEDITOR带了两种拼写检查工具,一种是ieSpell,默认情况下使用这种,使用这种方式的拼写检查,要求客户下载并安装iespell这个小软件,另外,也提供SpellPager的方式来进行拼写检查,不过,由于SPELLPAGER是由PHP编写的服务器端脚本,因此,要求你的WEB服务器必须支持PHP脚本语言方可
更改拼写检查器的方式请参见有关配置文件的详细说明
压缩脚本
为了提供脚本载入的效率,FCKEDITOR采用以下方法对脚本尽量压缩以减少脚本尺寸:
1,移除掉脚本中的注释
2.移除掉脚本中所有无意义的空白
另外,FCKEDITOR还提供了一个专门用于压缩脚本的工具以便 你在发布时能减小文件尺寸,
你可以将_Packager文件夹中的Fckeditor.Packager.exe复制到FCKEDITOR根文件夹来运行并压缩脚本
本地化FCKEDITOR
如果FCKEDITOR没有提供您所需要的语言(实际上全有了),你也可以自行制作新的语言
,你只需要复制出EN.JS,然后在其基础上进行翻译.另外,语言名称与对应的脚本文件名必须遵循RFC 3066标准,但是,需要小写,例如:Portuguess Language对应的脚本文件名必须为pt.js
如果需要针对某个国家的某种语系,则可以在语系缩写后加上横线及国家缩写即可
在使用时,系统会自动侦测客户端语系及国别而运用适当的界面语言.
当建立一种新的语言后,你必须在"Edit/lang/fcklanguagemanager.js"中为其建立一个条目,如下所示:
FCKLanguageManager.AvailableLanguages =
{
en : 'English',
pt : 'Portuguese'
}
需要提醒的是,文件必须保存为UTF-8格式
如何与服务器端脚本进行交互?
请查看例子以得到相关内容
另外,在ASP.NET中以以下步骤使用
1.把FCKEDITOR添中到工具箱
2.托拽FCKEDITOR控件到页面
3.为其指定名称
4.FCKEDITOR类的所有属性不光可以在代码中使用,而且可以作为FCKEDITOR控件的属性直接使用,例如,要改变皮肤,可以在UI页面中指定SkinPath="/fckeditor/editor/skins/office2003"即可,其实FCKEDITOR的ASP.NET版本可以做得更好,你可以找到FCKEDITOR ASP.NET 2.1的源文件,然后修改该控件的设计,为其暴露更多有用的属性,重新编译即可
5,POSTBACK后的数据,使用FCKEDITOR控件的value属性获得
6.默认状态下,FCKEDITOR作者并没有提供特定于ASP.NET的文件上传及文件浏览器,不过,你可以轻易的在FILEMANANGER的ASP.NET文件夹中找到空白的ASP.NET版文件浏览器,加入你自己用于浏览/上传的代码即可
7.由于默认状态下,ASP.NET不允许提交含有HTML及JAVASCRIPT的内容,因此,你必须将使用FCKEDITOR的页面的ValidateRequest设为false.(<%@page validteRequest="false" %>即可)
7.FCKEDITOR 1.6版与FCKEDITOR2.0版相差不是很大,不过,2.0版加入了JAVASCRIPT方式.
浙公网安备 33010602011771号