内置文件浏览器FCKeditor

本手册由zengl开源网的站长提供首页：www.zengl.com

Built in File Browser 内置的文件浏览器

本章介绍fck 编辑器内置的文件浏览器，可以浏览网站服务端的各种资源文件，像图片浏览，flash资源浏览等，可以打开_samples/default.html 示例文件（译者使用的是2.6.5版编辑器，其他版本的也差不多），在编辑器的工具条中找到 "插入/编辑图像" 和"插入/编辑 Flash" 两个按钮，点开 "插入/编辑图像"的按钮，会弹出个" 图像属性 " 对话框，点击图像分页栏里的浏览服务器按钮，就会出现文件浏览器，如果按照下面说的进行设置，就可以看到服务端存放图片的文件夹中的内容了，当然，一开始，默认是不允许访问的，所以会出现禁止访问的英文脚本警告。

The editor gives the end user the flexibility to create a custom file browser that can be integrated into it or to use the default file browser provided with the editor. This is a powerful feature because each scenario has unique requirements and the default file browser may not always meet them.Still, the editor package offers a default implementation of the File Browser so the user has a ready-to-use file browsing component, without having to develop anything. 这个编辑器为用户自定义文件浏览器提供了很多便利，用户既可以定制一个满足自己应用需求的文件浏览器，也可以直接使用编辑器提供的默认文件浏览器，并且该默认文件浏览器还设置了各种服务端实现。这样文件浏览器可以与PHP服务端通信，又可以与 asp.net ，perl 等通信。这些服务端的实现都可以根据自己的需要进行修改。

In prior versions, a sample File Browser was available for each supported server side technology. The problem with this approach is that each sample had a different implementation and worked completely differently from one another. And worse, some of them were really poor. 在以前的版本中，一个示例中的文件浏览器只能对特定的服务端程序有效，这就导致了每个示例的编程实现以及工作的效果都完全不同，更糟糕的是，其中的一些文件浏览器的执行效果很差劲。

To solve that problem the current version offers a unique user interface that can be used by all server side languages. The user interface was developed completely using Javascript DHTML and its integration is facilitated by XML. Doing it this way allows the developer to focus on their unique file browser requirements while not worrying about the presentation (client-side) layer. 在当前的版本中通过使用唯一用户接口技术，从而解决上述的问题，该接口可以和所有的服务端编程语言很好的工作。该用户接口完全使用 Javascript DHTML 来实现的，并且采用 XML 通信方式。这样，开发人员就只需集中精力针对自己的需要，开发文件浏览器的服务端，而不用担心显示层（客户端）的问题了。

The following graphic shows how the File Browser Integration works: 下图显示了文件浏览器的工作原理以及客户端和服务端的通信机制：

The XML Response looks similar to this: 在上图中，XML 响应部分的内容类似于下面所示：

<?xml version="1.0" encoding="utf-8" ?>
<Connector command="" resourceType="">
<CurrentFolder path="/" url="/path/to/file/" />
<Folders>
<Folder name="somefolder" />
</Folders>
<Files>
<File name="filename.jpg" size="numberOfKB" url="/path/to/file/filename.jpg" />
</Files>
</Connector>

Integrating the File Browser 集成文件浏览器

In order to integrate the default File Browser into your editor you need to set the connector to use your preferred server side language. By default, configuration is set-up to use the PHP connector (in version older than 2.5 the default is ASP), but you also can choose from ASP.NET, ColdFusion, Java, Lasso, Perl, PHP and Python. 要在你的编辑器中集成默认的文件浏览器，你需要使用你熟悉的服务端编程语言写一个连接器。默认情况下，在配置文件里设置的是使用PHP连接器（在 2.5 以前的老版本里默认是ASP），但是你也可以通过下面提到的配置方式改成 ASP.NET ,ColdFusion , Java ,Lasso,Perl 和Python 。（在译者使用的2.6.5版本的fckconfig.js 的 276行：

var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py

在上面的注释中的内容就是可改的服务端语言。）

Version 2.2 and Higher 2.2 及更高的版本

To change the default configuration open your fckconfig.js file and look for the FileBrowserLanguage and QuickUploadLanguage settings. Change the connector language to the appropriate setting. 要改变默认配置，只需打开 fckconfig.js 文件，找到 FileBrowserLanguage 和 QuickUploadLanguage 设置部分，然后改成你需要的语言即可。

For example, to use the PHP connector, the configuration would look like this: 例如，使用 PHP 连接器，配置情况就会是：

var _FileBrowserLanguage = 'php' ;

var _QuickUploadLanguage = 'php' ;

Uploading Files 上传文件

To upload files to the server you will also need to: 要上传文件到服务器，你需要做好以下几点：

1 。chmod 0777 the directory you want to upload to (insecure). 将服务端存放上传文件的目录设置为 0777 的访问权限，在unix , linux 中可以使用 chmod 0777 命令。
NOTE: It is advisable to change the group ownership of the directory to the same user as apache and add group write permisions instead. 注意：将目录所属用户组改成apache 所属用户，并赋予该用户组可写权限，是种不错的方式。

2 。In the connector configuration file (editor/filemanger/connectors/php/config.php) set $Config['Enabled'] to true.
2。在连接器的配置文件（editor/filemanger/connectors/php/config.php）文件中设置 $Config['Enabled'] 为 true.
NOTE: this is highly insecure unless you have protected the access to this directory with some kind of authentication. You can use session variables to avoid this problem. 注意：此举是很危险的，除非你使用了一些认证方式，确保访问目录的用户是合法的用户。你可以使用session会话中的变量来完成验证。默认情况下，$Config['Enabled'] 值为false ，所以一开始是无法使用文件浏览器访问文件的，也不能上传文件，可以在服务端程序认证用户的合法性后，再将$Config['Enable']设为 true 。在默认连接器 editor/filemanger/connectors/php/connector.php 中有下面一段程序：

if ( !$Config['Enabled'] ) 可以在此句前添加认证程序，然后根据认证结果设置 $Config['Enabled'] 的值
SendError( 1, 'This connector is disabled. Please check the "editor/filemanager/connectors/php/config.php" file' ) ;

3 。Set in $Config['UserFilesPath'] the url relative to the web site root where the files will be stored and retrieved from the web. For example "/userfiles/" if the files are supposed to be saved and retrieved from "http://www.example.com/userfiles/".
3 。需要设置连接器配置文件中的 $Config['UserFilesPath'] 的值，这个值是用户文件所在位置相对网站根目录的url。例如，如果文件是通过 "http://www.example.com/userfiles/" 该url 链接来执行保存和读取操作的，那么该配置选项的值就应该是 "/userfiles/" 。该url 值只是文件浏览器的服务端和客户端通信时用到的路径，但他不一定就是文件所在目录的真实路径，比如我可以通过下面要说到的 UserFilesAbsolutePath 配置的值把文件的目录保存到 "E:\\userfiles"中，而我的网站根目录在 C 盘下面，所以 "/userfiles/" 只是文件浏览器客户端在获取文件的请求和响应时使用的路径。当然，默认情况下 UserFilesAbsolutePath 配置是空的，所以，默认时，文件保存的真实目录与 url 中的相对路径还是一致的。举个例子：如果我的网站根目录是 C:\Program Files\wamp\www ，然后 $Config['UserFilesPath'] 的值是"/userfiles/" ， $Config['UserFilesAbsolutePath'] 的值为默认的空字符。那么，当我第一次点击图像属性对话框的浏览服务器按钮后，在 C:\Program Files\wamp\www 目录下就会出现文件浏览器新建的目录 "userfiles" 在该目录下还有个"image"子目录，当在文件浏览器里上传一个文件后，该文件就会出现在 userfiles 里。如果， $Config['UserFilesAbsolutePath'] 的值设为 "E:\\userfiles" 那么结果就会在 E盘下出现一个 "userfiles" 目录。但不论文件保存的真实路径是多少，文件浏览器客户端所接收到的xml 响应中

其中的 url 值始终是 "/userfiles/image/" （这里以图像为说明，所以后面跟了 image 子目录）。

4 。You can use the UserFilesAbsolutePath setting to specify the local path for the folder where the files will be stored, and then in UserFilesPath you can use an absolute url like "http://www.example.com/myfiles/".
4 。第四点，前面已经说过了，就是设置文件保存在服务器中的本地路径即设置 $Config['UserFilesAbsolutePath'] 的值。

Returning Full URLs 返回完整的urls

You can configure the File Browser to return full URLs to FCKeditor, like "http://www.example.com/userfiles/", instead of absolute URLs, like "/userfiles/". To do that, you must configure the connector, combining the UserFilesPath and UserFilesAbsolutePath settings: 你可以配置文件浏览器，让他返回完整的url 到FCKeditor ，像 "http://www.example.com/userfiles/" ，从而取代绝对路径形式的url 如"/userfiles/" 。要做到这一点，你必须配置连接器，关联好 UserFilesPath 和 UserFilesAbsolutePath 的设置：

● UserFilesPath: include here the full URL for the user files directory. For example, set it to "http://www.example.com/userfiles/". UserFilesPath: 设置为用户文件目录的完整url 值如："http://www.example.com/userfiles/"

● UserFilesAbsolutePath: include here the server path to reach the above URL directory. For example, in a Windows environment, you could have something like "C:/inetpub/mysite/userfiles/", while on Linux, something like "/usr/me/public_html/mysite/userfiles/". UserFilesAbsolutePath 的值就是前面的 UserFilesPath 所设置的url 路径所对应的在服务器中的真实的完整路径。比如在 windows 环境下类似于 "C:/inetpub/mysite/userfiles/" ，而在linux 系统下真实的路径就类似于"/usr/me/public_html/mysite/userfiles/" ，这样，完整的url 值就和服务端真实的路径联系起来了。

Just adjust the above settings to your installation values and the File Browser will start returning full URLs to the editor.
通过上述的设置，你的文件浏览器就会向编辑器返回完整的URL 地址。

Allow and deny extensions settings for filetypes 访问的文件类型中允许和禁止的扩展名设置

In editor/filemanager/connectors/(your server side language extension)/config.(extension) you can configure what extensions are allowed or denied for specific filetypes. 在 editor/filemanager/connectors/(你使用的服务端语言扩展)/config.(扩展后缀名) 文件中，你可以配置指定的文件类型中，哪些扩展名的文件允许访问，哪些禁止访问。在配置文件（比如config.php）中，你可以找到类似如下的数组：

$Config['AllowedExtensions']['File'] = array('7z', 'aiff', 'asf', 'avi', 'bmp', 'csv', 'doc', 'fla', 'flv', 'gif', 'gz', 'gzip', 'jpeg', 'jpg', 'mid', 'mov', 'mp3', 'mp4', 'mpc', 'mpeg', 'mpg', 'ods', 'odt', 'pdf', 'png', 'ppt', 'pxd', 'qt', 'ram', 'rar', 'rm', 'rmi', 'rmvb', 'rtf', 'sdc', 'sitd', 'swf', 'sxc', 'sxw', 'tar', 'tgz', 'tif', 'tiff', 'txt', 'vsd', 'wav', 'wma', 'wmv', 'xls', 'xml', 'zip') ;
$Config['DeniedExtensions']['File'] = array() ;

其中就定义了 File 文件类型所允许和禁止的扩展名。
The filetypes you can configure are: 你可以配置的文件类型如下所示：（具体扩展名信息，要查看你使用的连接器的配置文件。）

● Files, e.g. : 'htm', 'html', 'php', 'php3', 'php5', 'phtml', 'asp', 'aspx', 'ascx', 'jsp', 'cfm', 'cfc', 'pl', 'bat', 'exe', 'dll', 'reg', 'cgi', 'asmx'

● Images, e.g. : 'jpg', 'gif', 'jpeg', 'png'

● Flash, e.g. : 'swf'

● Media, e.g. : 'swf', 'fla', 'jpg', 'gif', 'jpeg', 'png', 'avi', 'mpg', 'mpeg'

Denying extensions will show all files except for the ones with the specified extensions, while allowing extensions will show no files except for the ones with the specified extensions. To allow all extensions for a filetype, leave both of the arrays empty for that filetype. 禁止的扩展名信息会在文件浏览器的客户端中显示除了禁止的扩展名文件外的所有文件。允许的扩展名信息则只会显示允许的扩展名文件。如果想允许一种文件类型的所有扩展名，只需将针对该文件类型的所有访问控制数组设为空即可。

Set a specific directory for each file type 为每种文件类型设置指定的目录

In the current SVN and in 2.5 it will be possible to specify if each file type should use a custom folder using the FileTypesPath and FileTypesAbsolutePath. The QuickUpload folders can be controlled with QuickUploadPath and QuickUploadAbsolutePath. 在当前的SVN 以及 2.5版本中，可以为每种文件类型指定一个自定义的目录，只需在连接器配置文件中设置 FileTypesPath 和 FileTypesAbsolutePath 这两个数组成员即可。QuickUpload（快速上传）的目录可以通过 QuickUploadPath 和 QuickUploadAbsolutePath 来配置。前面提到过的通过图像浏览器访问服务器时，访问的路径"/userfiles/image/" 中的image 子目录就是在 FileTypesPath and FileTypesAbsolutePath中指定的，至于快速上传，在图像属性对话框中有个上传分页栏，通过这里上传的路径就是在QuickUploadPath 和 QuickUploadAbsolutePath 中设置的。

For versions up to 2.4.3, if you have to integrate FCKeditor in an existing project, there may be no possibility to use the standard filebrowser folders based on the filetype: Image, Flash, Media and File. In this case, the following comment may help you: http://sourceforge.net/tracker/index.php?func=detail&aid=1312834&group_id=75348&atid=543655
对于2.4.3的版本，如果你必须在一个项目中整合FCKeditor 的话，要让标准的文件浏览器的目录基于上面所述的文件类型，可能无法实现，在这种情况下，这个链接中的信息可能会帮助你：http://sourceforge.net/tracker/index.php?func=detail&aid=1312834&group_id=75348&atid=543655

Using the File Browser outside of FCKeditor 在FCKeditor 之外使用文件浏览器

You may use the File Browser in your pages directly. Even if this feature is not supported by default, you may find some information about it here: 你可以直接在你自己的网页中使用这种文件浏览器，你可以在下面的链接中找到相关信息:
https://sourceforge.net/tracker/index.php?func=detail&aid=1369609&group_id=75348&atid=543655

如果本文有翻译不周的地方，或有其他方面的评论，可以到下方发表评论。

上下篇

下一篇： FCKeditor自定义插件

上一篇： FCKeditor的拼写检查器

FCKeditor的JavaScriptAPI

JavaScript脚本加载fckeditor编辑器