站长论坛

标题: PHP在线编辑器最新版FCKeditor2.3.2配置过程 [打印本页]

作者: superadmin 时间: 2007-10-4 22:01
标题: PHP在线编辑器最新版FCKeditor2.3.2配置过程
前言：FCKeditor网页在线编辑器功能强大好易上手，这个众所周知了。网站系统集成了FCKeditor编辑器，帮助非专业的编程员对HTML网页进行排版发布新闻文章
提高工作效率之外也使得网页整体美观性一致。我进期用PHP编写一套学校的新闻发布系统，后台的编辑器太过简单，只用简单的JS导入连接。功能马虎了，感觉很别扭。
于是在网上搜索下如何集成网站编辑器的教程，发觉很多文章都是转载来转载去的。教程所用的版本参差不齐，有的说1.6版本的，有的教2.0版本的，有的是2.1.1版本的。
乱七八糟的版本竟然教程都是一样的，对初学者很难集中理解。于是我查询FCKeditor官方网站，官方平台上已经公布了2.3.2最新版本。对比一下之前在网上查询的教程，都是
介绍久版本的。于是我下载了新版本，（起码新鲜呀，不至于被他人修改过其中的文件）。呵呵，OK，接下来就进行出略看看里面的文件，进行安装了。。。

1. 先下载FCKeditor2.3.2

下载地址：http://prdownloads.sourceforge.net/f...2.zip?download

2.在自己的PHP服务器根目录下随意新建目录，我自己建立的是/test/，将下载的文件解压到该目录中。

目录结构如下：

test 测试的目录
|
|_____FCKeditor/ 下载FCKeditor解压后的目录
|
|_____test.php (新建用来测试的文件，下附代码)
|
|_____show.php (新建用来接收提交数据的显示文件页面，下附代码)

3.现在FCKeditor已经就绪。只要加入下列代码生成一个编辑器(一般在<FORM></FORM>中)

test.php文件简单代码如下：

<html>
<head>
</head>
<body>
<form name="form1" action="show.php" method="post" language="javascript">
<?php
include("FCKeditor/fckeditor.php") ;
$oFCKeditor = new FCKeditor('FCKeditor1') ;
$oFCKeditor->BasePath = './FCKeditor/';
$oFCKeditor->Value = '';
$oFCKeditor->Create() ;
?>
<INPUT type="submit" name="submit" value="提交">
</form>
</body>
</html>

"FCKeditor1" 是表单中的编辑器对应的输入框名称. 使用 $sValue = stripslashes( $_POST['FCKeditor1'] ) ; 来接收编辑器中输入的内容。 "_samples"目录下有更多的使用范例。

show.php代码如下：

<?php
$sValue = stripslashes( $_POST['FCKeditor1'] );
echo"$sValue";
?>

该文件，只是简单的测试显示页面，相关的插入数据库的函数，自己根据自己的实际情况添加进去就得了。。

4. 配置上传和浏览功能

打开fckconfig.js文件进行简单的配置

以前旧版本的，很多教程都会说到以下的配置值必须是“true”，现在2.3.2版本的，你会发觉，都已经设置成“true ”值了，那么这步就省略了。

FCKConfig.LinkBrowser = true ;
FCKConfig.ImageBrowser = true ;
FCKConfig.FlashBrowser = true ;
FCKConfig.LinkUpload = true ;
FCKConfig.ImageUpload = true ;
FCKConfig.FlashUpload = true ;

接着搜索fckconfig.js文件中的: var _FileBrowserLanguage （143行）

它的初始设置值是 var _FileBrowserLanguage = 'asp' ;

那么我是需要PHP版本的，那么就可以改成var _FileBrowserLanguage ='php'

而且，它适用于 “asp | aspx | cfm | lasso | perl | php | py ” 等等编程语言，改回你自己需要的就OK。

它的意思的指向程序类型的配置文件路径。

再找到144行，var _FileBrowserLanguage ='asp'; 也改成var _FileBrowserLanguage ='PHP';

这里的意思是修改上传文件等配置文件的指向路径，和上传组件的路径。

fckconfig.js配置完毕。。。

5. 然后编辑FCKeditor安装目录下的浏览程序配置文件和上传程序配置文件,需要明确指定为true。

打开文件 /editor/filemanager/browser/default/connectors/php/config.php

// SECURITY: You must explicitelly enable this "connector". (Set it to "true").
$Config['Enabled'] = true ;
// Path to user files relative to the document root.
$Config['UserFilesPath'] = '/UserFiles/' ;

打开文件 /editor/filemanager/upload/php/config.php

// SECURITY: You must explicitelly enable this "uploader".
$Config['Enabled'] = true ;
// Path to uploaded files relative to the document root.
$Config['UserFilesPath'] = '/UserFiles/' ;

这两个文件中都有一个目录配置。为了使上传的文件可以被浏览，将这两个目录都指向/UserFiles/。相应的在网站根目录建立一个UserFiles目录。
FCKeditor在浏览和上传的时候会根据文件类型(Image,File,Flash...)建立和选择不同的目录。比如在浏览图像时会自动进入/UserFiles/Image/目录浏览。上传图像时会自动传入/UserFiles/Image/。

6.好了。。这样可以上传文件了。。仔细测试了好几次，突然发觉上传以中文命名的图片或文件，会出现文件名乱码了。应该是在javascript的url编码传递中造成的了，那么
就想想法办把它解决。细想还是用最原始的方法，就用上传时间作为文件命名。那么找到上传的文件：\editor\filemanager\upload\php\upload.php 打开找到 $sFileName = $oFile['name'] ;
替换为：

$sFileName = $oFile['name'] ;
$sOriginalFileName = $sFileName ;
$sExtension = substr( $sFileName, ( strrpos($sFileName, '.') + 1 ) ) ;
$sExtension = strtolower( $sExtension ) ;
$sFileName = date("YmdHis",time()+22800).".".$sExtension;

这样，就可以解决了上传文件时，遇到中文命名的文件出现乱码而无法显示的问题。

还有一点，就是要在服务器根目录下建立UserFiles文件夹，否则上无法上传文件，这点很多网上的提问无法上传文件的原因。只要在服务器根目录下建立UserFiles目录，程序有目录指向
就能上传文件了。再有的就是该编辑器自动建立了(Image,File,Flash...)等文件夹在UserFiles中，这是自动文件分类程序中的作用了，作用是给管理者更好的文件类型的管理。

作者: superadmin 时间: 2007-10-4 22:01
FCKeditor2.3.2在线编辑器非常好用，完全支持文件上传。今天baidu了一下午终于搞定了。下载FCKeditor2.3.2，解压至FCKeditor。

1首先删除不必要的文件节省空间。凡是以_开头的文件如_samples，_testcases和一些用不到的.asp、.jsp、.cfm文件统统干掉。

2修改fckconfig.js
FCKConfig.AutoDetectLanguage = true ;//是否自动检测语言
FCKConfig.DefaultLanguage = 'zh-cn' ;//设置语言
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/' ;//设置皮肤
FCKConfig.TabSpaces = 1 ;//tab是否有效
FCKConfig.ToolbarStartExpanded = true ;//编辑工具条是否出现，等点“展开工具栏”时才出现
FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;//添加中文字体

修改FCKeditor\editor\CSS\fck_editorarea.css
设置默认字体及大小
body, td
{
font-family: Arial, Verdana, Sans-Serif;
font-size: 14px;
}

3关于文件上传的设置

修改fckconfig.js
var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php

修改fckeditor\editor\filemanager\browser\default\connectors\php
$Config['Enabled'] = true ;
$Config['UserFilesPath'] = '/UserFiles/' ;//设置上传的文件夹，可自己指定

修改fckeditor\editor\filemanager\upload\php
$Config['Enabled'] = true ;
$Config['UseFileType'] = true ;
$Config['UserFilesPath'] = '/UserFiles/' ;//同上要一样

4引入在线编辑器时只需
<?php
include("fckeditor/fckeditor.php") ;
$oFCKeditor = new FCKeditor('FCKeditor1') ;//实例化
$oFCKeditor->BasePath = 'fckeditor/';//这个路径一定要和上面那个引入路径一致，否则会报错:找不到fckeditor.html页面
//$oFCKeditor->Value = '' ;
$oFCKeditor->Width = '100%' ;
$oFCKeditor->Height = '300' ;
$oFCKeditor->Create() ;
?>

JS用alert( FCKeditorAPI.GetInstance('FCKeditor1').GetXHTML( true ))得到FCKeditor1的值；
PHP用$_POST['FCKeditor1']得到FCKeditor1的值。

作者: superadmin 时间: 2007-10-4 22:01
FCKeditor 是一个十分强大的网页文本编辑器，它支持多种脚本编程语言和支持多国语言。
如果你还不知道或者你知道还不会配置这个的话，请你继续往下看。

我用是FCKeditot的版本是2.1，不过现在已经有FCKeditor 2.3.2 released版本了，
你可以到他的官方网站上去下载 http://www.FCKeditor.net/。

本文介绍的是关于php的配置方法，其他语言的配置方法是和它一样的。

假设网站的目录为：
\www
\index.php
\inc
\FCKeditor

一、PHP中调用FCKeditor的两种方法（asp差不多的）

1、通过创建实例
  在这里只写调用它的代码了，网站的其他代码当然由你自己写了，把下面的代码加在需要编辑器的地方：
  <?php
  include_once("FCKeditor/fckeditor.php"); //引用FCKeditor.php这个文件
  $FCKeditor=new FCKeditor('welefen');       //创建FCKeditor对象的实例
  $FCKeditor->BasePath='FCKeditor/';       //FCKeditor所在的位置，这里它的位置就是'FCKeditor/';
  $FCkeditor->ToolbarSet='Default';          //工具按钮设置
  $FCKeditor->Width='100%';                //设置它的宽度
  $FCKeditor->Height='300px';                //设置它的高度
  $FCkeditor->Create();
  ?>
2:通过iframe调用创建
在你认为该加的地方加上
<INPUT id=content style="DISPLAY: none" type=hidden name="welefen">
<INPUT id=content___Config style="DISPLAY: none" type=hidden>
<IFRAME id=content___Frame src="FCKeditor/editor/fckeditor.html?InstanceName=welefen&Toolbar=Default" frameBorder=0 width=100% scrolling=no height=300>
</IFRAME>

对上述两种方法的说明：

在上述两种方法中，你都看到了字符串'welefen'，你可能不知道是什么意思，现在我给你解释一下
如果你要将文本编辑器中的内容在另外一个页面显示或者要将在它保存在数据库，你可以用
$_POST['welefen']或者用$_GET['welefen']来获取文本编辑器中的内容,具体是用post还是用get那要看你用的是什么传递方法了
当然你也可以把welefen改成你想要用的，如'content'.

如果你还不知道什么是ajax，那么这一段话你就不用看了。
当你用ajax的来获得内容的时候是不是发现得不到内容，如：
<script>alert(document.form.content.value)</script>你会发现谈出的窗口没内容
那么我们可以通过下面的代码来获得它的内容：
function getContentValue()
{
var oEditor = FCKeditorAPI.GetInstance('content') ;
var acontent=oEditor.GetXHTML();
return acontent;
}

二：配置一些文件
1:fckconfig.js的配置
  (1).工具按钮设置

  查找FCKConfig.ToolbarSets["Default"]，这里有很多按钮，下面我们将对他们详细介绍

  EditSource 显示HTML源代码 StrikeThrough 删除线
  Save 保存 Subscript 下标
  NewPage 新建空白页面 Superscript 上标
  Preview 预览 JustifyLeft 左对齐
  Cut 剪切 JustifyCenter 居中对齐
  Copy 复制 JustifyRight 右对齐
  Paste 粘贴 JustifyFull 两端对齐
  PasteText 纯文本粘贴 InsertOrderedList 自动编号
  PasteWord 来自Word的粘贴 InsertUnorderedList 项目符号
  Print 打印 Outdent 减少缩进
  SpellCheck 拼写检查 Indent 增加缩进
  Find 查找 ShowTableBorders 显示表格线
  Replace 替换 ShowDetails 显示明细
  Undo 撤销 Form 添加Form动作
  Redo 还原 Checkbox 复选框
  SelectAll 全选 Radio 单选按钮
  RemoveFormat 去除格式 Input 单行文本框
  Link 插入/编辑链接 Textarea 滚动文本框
  RemoveLink 去除连接 Select 下拉菜单
  Anchor 锚点 Button 按钮
  Image 插入/编辑图片 ImageButton 图片按钮
  Table 插入/编辑表格 Hidden 隐藏
  Rule 插入水平线 Zoom 显示比例
  SpecialChar 插入特殊字符 FontStyleAdv 系统字体
  UniversalKey 软键盘 FontStyle 字体样式
  Smiley 插入表情符号 FontFormat 字体格式
  About 关于 Font 字体
  Bold 粗体 FontSize 字体大小
  Italic 斜体 TextColor 文字颜色
  Underline 下划线 BGColor 背景色

这个默认的是包含了所有的工具按钮，不过到我们具体要用的时候，有的按钮并不需要，而且还影响速度。那么我们可以将我们不需要的按钮给删了。下面是我的配置，给大家一个参考，当然你可以根据你的喜好。
FCKconfig.ToolbarSets["Default"] = [
['EditSource','Save','NewPage','Preview','-','Cut','Copy','Paste','PasteText','-','Find','Replace','-','Undo','Redo','-','SelectAll','-','Link','RemoveLink','-','Image','Table','Rule','SpecialChar','Smiley'] ,
['Bold','Italic','Underline','-','JustifyLeft','JustifyCenter','JustifyRight','-','InsertOrderedList','InsertUnorderedList','-','Form','Checkbox','Radio','Input','Textarea','Select','Button','-','FontStyleAdv','TextColor'] ] ;

如果在前台给用户回复一写帖子的话，还是没必要要上面的，这时你可以在加一个：
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;

这样的话，你在前台调用的时候就要用$FCKeditor->ToolbarSet='Basic',不能再为"Default"了。

(2)：语言的配置

查找FCKConfig.DefaultLanguage将它设置为'zh-cn'.

(3):脚本语言的设置

查找var _FileBrowserLanguage和var _QuickUploadLanguage将他们设置为'php', 默认是'asp',如果这里不设置的话，图片将不能上传，这点很重要。当时我在用FCKeditor由于没配置这个，不能上传图片，而我同寝室的用asp能上传图片，让我烦恼了好多天，最后终于找到是这个原因。

2:图片上传的配置

打开文件FCKeditor/editor/filemanager/browser/default/connectors/php/config.php
查找$Config['Enabled']，将它设置为'true'
查找$Config['UserFilesPath']，将它设置图片的目录，这个目录是相对于主目录的。
例如：我写了一个blog，就可以设置为/blog/upload/

打开文件FCKeditor/editor/filemanager/upload/php/config.php
查找$Config['Enabled']，将它设置为'true'
查找$Config['UseFileType']，将它设置上传文件的目录，最好与上面的图片目录相同。

好了，现在所有的配置都已经完成了，现在你要做的只是删除一些不必要的文件了。
只要包含'_'的目录名和文件名都可以删除，当然你用的是ASP，其他语言的一些目录也都可以删除，这样就减小了文件的大小.

最后附上乔客4.0FCK的配置，大家看完上面的文字就应该会自己修改拉！哈哈，大家一起打造超强的FCK吧！

/*
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
'/',
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],
'/',
['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','-','About']
] ;
*/
FCKConfig.ToolbarSets["Default"] = [
['Source','DocProps','Preview'],
['Cut','Copy','Paste','PasteText','PasteWord'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Link','Unlink','Anchor'],
['Image','Flash','Table','Rule','SpecialChar','PageBreak'],
['Form','Checkbox','Radio','TextField','Textarea','Select','Button','HiddenField'],
['TextColor','BGColor'],
['FontFormat','FontName','FontSize']
] ;
FCKConfig.ToolbarSets["Basic"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','About']
] ;

复制代码

作者: superadmin 时间: 2007-10-4 22:02
比如我在PHP中使用代码为：
  <?php
      include("../inc/fckeditor/fckeditor.php") ;
      $oFCKeditor = new FCKeditor('fckeditor1')  ;
         $oFCKeditor->BasePath = '../inc/fckeditor/' ;
         $oFCKeditor->ToolbarSet = 'Default' ;
         $oFCKeditor->InstanceName = 'intro' ;  //相当于INPUT里面的NAME
         $oFCKeditor->Value = $rs['intro'] ;  //修改的时候才用到的
         $oFCKeditor->Width = '100%' ;
         $oFCKeditor->Height = '320' ;
         $oFCKeditor->Create() ;
      ?>

作者: superadmin 时间: 2007-10-4 22:02
标题: 我自己调用的fckeditor[iframe的形式]

<?=$language['adminnews_newsshow_form_content'] ?>
<?=$ncontent ?>

复制代码

作者: superadmin 时间: 2007-10-4 22:02
前言：
　　FCKeidtor是个国外的多语言编辑器，你可以对其配置文件进行简单修改使之支持目前常用Web开发语言的应用，下面我就讲讲FCKeditor的最新版本2.4.2在php的具体配置过程，有不足和出错的地方，欢迎指正。

精简：
　　正因为这个编辑器是支持多语言的，所以首先我们针对使用对其做相应的冗余文件删除。
　　
　　1、临时文件及文件夹删除：从根目录下开始删除一切以“_”开头的文件及文件夹，因为他们为临时文件和文件夹。删除这类临时文件及文件夹之后，我们还要删除一些根目录下的多余文件，根目录下我们只保留fckconfig.js（配置文件）、fckeditor.js（js方式调用文件）、fckeditor.php（php方式调用文件，新版本通过该文件统一调用php4或者php5的调用文件，fckeditor_php4.php/fckeditor_php5.php你可以根据自己服务器使用的情况删减，建议都保留）、fckeditor_php4.php（php4的调用文件）、fckeditor_php5.php（php5的调用文件）、fckstyles.xml（样式）、fcktemplates.xml（模板）文件和editor文件夹。
　　
　　2、editor\lang目录：存放的是多语言配置文件，因为我们只可能用到en和zh-cn（简体中文）所以，根据我的选择，我删掉其他的语言配置文件。

　　3、editor\skins界面目录：默认带有三个界面（default：默认界面，加载速度相对较快；office2003：相对pp的界面，不过速度确实要慢些；silver：银白色界面，加载速度也相对较快），可以自行决定是否删除其中一两个。

　　4、editor\filemanager\browser\default\connectors目录：存放编辑器所支持的Web动态语言，我们以php为例所以保留php目录，test.html文件可以帮助你查看某语言下的上传设置等（具体上传设置我将在后面的配置作较为详细讲解），可以自行决定是否删除。

　　5、editor\filemanager\upload目录：同理。

　　到此精简完成，你会发现整个编辑器确实“瘦身”不少，呵呵

基本配置：

　　下面我开始对编辑器进行简单配置（并非每步都必须，可根据自己的需要参考修改）：

　　1、默认语言
　　打开fckconfig.js文件（注意此文件是utf-8编码哦），找到FCKConfig.AutoDetectLanguage = true ;（第56行）此句作用为自动检测语言，默认为true，即表示编辑器会根据系统语言自动检测加载相应的语言，我们将其改为false，不让其检测，然后将FCKConfig.DefaultLanguage = 'en';（编辑器默认语言，第57行）改为简体中文"zh-cn"。

　　2、字体列表
　　依然打开fckconfig.js，因为此编辑器为外国人编写，所以默认不提供中文字体，我们为其加入，找到FCKConfig.FontNames（第142行）加入“宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;”其他字体可根据自己需要自行加入。

　　3、文件上传
　　FCKeditor的文件管理程序在editor/filemanager/文件夹下，分为浏览（browser）和上传（upload）两种。“浏览”是指浏览服务器已存在文件并可以选择，也可以上传本地文件至服务器；上传是指快速上传，在窗口中点“上传”选项，选择本地文件后上传就行，但是不能查看服务器上已有上传文件，相对而言不太方便，只是操作更为快捷。也就是说FCKeditor中有一个文件浏览，有两个文件上传，而这些设置是分散在多个文件中，配置相对复杂，下面我大致讲一下：
　　在FCKeditor中共有三个文件跟上传功能有关，一个是js文件，两个是php文件，前者关闭后界面中不出现相关窗口或按钮，后者关闭后相关功能不可用。
　　js文件即是指的fckconfig.js文件，在以前旧版本的fckconfig.js中首先你必需开启如下几项：

　　浏览上传功能：

FCKConfig.LinkBrowser = true ; //文件
FCKConfig.ImageBrowser = true ; //图片
FCKConfig.FlashBrowser = true ; //Flash

快速上传功能：

FCKConfig.LinkUpload = true ; //同上
FCKConfig.ImageUpload = true ; //同上
FCKConfig.FlashUpload = true ; //同上

　　即把这几项设为true，而我们今天使用的2.4.2的fckconfig.js中默认已经是开启上传开关显示功能的，所以，如果你要将该编辑器作为前台使用（fckeditor上传漏洞问题一直没有得到较好的改善），考虑到安全性你可能需要关闭文件上传功能，那么你只需要将这几项设置为false即可（当然两个php文件你也不要开启上传功能哦）。

　　如果你要使用文件上传功能，那么我们继续配置：
　　依然在fckconfig.js文件中，fckeditor对语言默认支持的是asp，找到以下两句，进行相应修改：

var _FileBrowserLanguage = 'asp' ; // asp | aspx | cfm | lasso | perl | php | py（第182行）
var _QuickUploadLanguage = 'asp' ; // asp | aspx | cfm | lasso | php（第183行）

我们将其均改为'php':　　

var _FileBrowserLanguage = 'php' ; // asp | aspx | cfm | lasso | perl | php | py（第182行）
var _QuickUploadLanguage = 'php' ; // asp | aspx | cfm | lasso | php

　在2.4.2版本中，我们发现增加了对更多文件后缀名的支持，这个应该是为了解决上传漏洞所作的些许改动，不过作用不大，呵呵
　　*.AllowedExtensions：（其中*号代表：FCKConfig.LinkUpload、FCKConfig.ImageUpload等）表示允许上传的文件后缀名，为空表示允许所有文件，你可根据自己需要设置上传文件后缀名，一定程度增加安全性，设置的格式可以参考它已有的后缀名设置。
　　*.DeniedExtensions：同上，表示禁止上传的文件后缀名。

　　注：你设置了允许上传的，当然禁止的也就不必要设置了，本人推荐设置允许的，毕竟禁止的后缀名列表不能罗列完全，可能还有很多我们不曾想到的后缀名。

　　对js文件的配置到此已经完成，下面我们进行两个php文件在上传方面的设置：

　　文件浏览上传修改：
　　打开editor\filemanager\browser\default\connectors\php\config.php文件，找到：
　　$Config['Enabled'] = false ;（第28行）将false改为true，即允许上传。
　　$Config['UserFilesPath'] = '/userfiles/' ;（第32行）为定义上传目录，可根据自己情况进行修改，我将其改为upload目录。

　　注：注意FCKeditor是不支持虚拟目录的，你的所有路径都是针对网站根目录的绝对路径。

　　文件快速上传修改：
　　打开文件editor\filemanager\upload\php\config.php文件，找到
　　$Config['Enabled'] = false ;（第28行）将false改为true。
　　$Config['UserFilesPath'] = '/UserFiles/' ;（第35行）同“文件浏览上传”的上传目录。
　　$Config['UseFileType'] = false ; （第32行）改为true，不然上传文件不会放在上传目录中
　　在该文件中，还有一项：
　　$Config['UserFilesAbsolutePath'] = '' ;（第41行）
　　这项的作用是设定上传的绝对路径，比如，你想指定上传文件到D:/Web/upload/下，你可以指定它的值为你的绝对路径，注意，如果你指定了该值，那你也要对$Config['UserFilesPath'] = '/UserFiles/' ;作相同的设置。

　　到此上传基本配置已经完成，整个编辑器最基本的配置也已经结束了，你可以通过下列代码对其进行调用测试了：
　　[php]<?php
　　include("/fckeditor/fckeditor.php"); // 包含fckeditor类，fckeditor目录放在网站根目录下
　　$BasePath = "/fckeditor/"; // 编辑器路径
　　$oFCKeditor = new FCKeditor('jayliao'); // 创建一个fckeditor对象，表单的名称为jayliao
　　$oFCKeditor->BasePath = $BasePath;
　　$oFCKeditor->Value = 'test'; // 设置表单初始值
　　
　　// 还可设置以下部分（“=”包含部分），并非必须：
　　//==================================================================================//
　　$oFCKeditor->Width = '100%'; // 编辑器宽度，类中有默认值，如果不想修改可不管此项
　　$oFCKeditor->Height= '300'; // 同width，此处为高$oFCKeditor->ToolbarSet
　　$oFCKeditor->ToolbarSet = 'JayLiao'; // 默认编辑器工具栏有Basic（基本工具）和Default（所有工具）两种选择，JayLiao为本人自定义的工具条，如有需要可参考后文中的说明新建或修改工具条
　　$oFCKeditor->Config['SkinPath'] = '/fckeditor/editor/skins/office2003/'; // 设置编辑器皮肤
　　//==================================================================================//
　　
　　$oFCKeditor->Create(); // 调用类中方法，必须
　　?>[/php]

　　赶紧测试一下吧，是不是很激动，终于可以看到这个强大的编辑器了，呵呵。不过，马上你会发现在上传以中文命名的文件时会出现乱码，这到底是怎么回事呢？呵呵，不怕，下面我们就对其进行简单修改问题很快就解决的：
　　我们为上传文件以时间+随机数作为其新名字，打开：editor\filemanager\upload\php\upload.php，找到：
　　[php]$sFileName = $oFile['name'] ;[/php]
　　替换为：
　　[php]　　$sFileName = $oFile['name'] ;
　　$sOriginalFileName = $sFileName ;
　　$sExtension = substr( $sFileName, ( strrpos($sFileName, '.') + 1 ) ) ;
　　$sExtension = strtolower( $sExtension ) ;
　　$sFileName = date("YmdHis").rand(100, 200).".".$sExtension;[/php]
　　哈哈，你会发现“快速上传”的乱码已经解决，就这么简单，高兴之余不要忘了，同样，还需要修改“浏览”的上传，修改文件：editor\filemanager\browser\default\connectors\php\commands.php，修改内容同上。

　　另：你上传的中文文件不做以上命名修改可能在服务器上并非乱码，如果你只是为了在浏览的时候让编辑器正确显示该类文件名，那你可以作如下修改，打开：editor\filemanager\browser\default\connectors\php\util.php，修改ConvertToXmlAttribute函数，将：

return utf8_encode( htmlspecialchars( $value ) ) ;

修改为：
　　

return iconv( "GBK", "UTF-8", htmlspecialchars($value) ) ;

这样，你的编辑器应该已经能正确显示中文名，不过强烈建议你修改上传文件的命名，中文名可能存在诸多不便。

　　当完成以上设置后，fckeditor已经能满足我们的日常使用需要，不过我们却又发现一个问题，那就是上传后的文件我们却无法删除，这样会使网站上的垃圾文件（主要是图片）日益增多，那我们是否能够通过对编辑器的修改能较为方便的管理删除无用上传文件呢？我们不难想到fckeditor的浏览文件功能，对该功能进行适当的扩展，对日常所上传的文件进行管理就变得相当简单易行了，那我们赶紧动手吧：
　　增加该功能我们修改的页面为：fckeditor\editor\filemanager\browser\default\frmresourceslist.html

　第一步，在页面的body区域增加如下代码：

　<div id="showFile" style="float:left; display:none; background-color:#999999"></div>
　　<iframe id="iframe_del" name="iframe_del" width="0" height="0" scrolling="no"></iframe>
　　<div id="body_content"></div>

　

说明：第一对
的作用是当我们把鼠标移动到所上传的文件上时显示其相关信息；<iframe></iframe>标签的作用是供我们删除上传文件时做动作响应窗口的，即是将我们的删除动作在iframe中运行，目的是实现伪无刷新删除效果；最后一对
的作用是显示上传文件及文件夹的列表（2.4较以前版本对标签中内容作了调整，老版该页面以作为存放列表的容器，而新版直接将显示容器在js中生成，为了使文件显示div和iframe两组标签正常使用，故在body标签中加入一对
标签，使之能正常使用，在我的尝试中，倘若不这样修改似乎有错，当然不排除我方法不当的原因，呵呵）
　　
　　第二步，在文件的js代码区中加入：

// add by jayliaoscu @ 2007-04-23 /*{{{{*/
　　// 显示文件显示层
　　function showDiv( fileUrl )
　　{
　　　　var name = fileUrl;
　　　　//获取文件类型
　　　　var suffix = name.substring(name.lastIndexOf(".")+1);

　　　　var div= document.getElementById("showFile");
　　　　div.content = "";
　　　　div.style.position = "absolute";
　　　　div.content += "<table width='256' border='0' cellpadding='3' cellspacing='1' bgcolor='#737357'><tbody><tr><td height='23' align='left' bgcolor='#C7C78F'><table width='100%' height='100%' border='0' cellpadding='0' cellspacing='0'><tbody><tr><td width='47%'> <a href='javascript:' onClick='hiddenDiv();'><font color='#000000' style='text-decoration:none;'>关闭</font></a></td><td width='53%' align='right'><a href='javascript:' onclick='delFile(\"" + fileUrl + "\");'><font color='#000000' style='text-decoration:none;'>删除</font></a> </td></tr></tbody></table></td></tr>";
　　　　if (suffix=='gif' || suffix=="jpg" || suffix=="jpeg" || suffix=="bmp" || suffix=="png")
　　　　{
　　　　　　　div.content += "<tr><td align='center' bgcolor='#C7C78F'><img src='" + fileUrl + "' onload='if(this.width>250) this.width=250' style='margin:3px;'></td></tr>";
　　　　}
　　　　else
　　　　{
　　　　　　　div.content += "<tr><td height='35' align='center' bgcolor='#C7C78F'><strong>该类型不能预览</strong></td></tr>";
　　　　}
　　　　div.content += "</tbody></table>";
　　　　div.innerHTML = div.content;
　　　　div.style.display = "";
　　　　div.style.top = event.y+document.body.scrollTop+10;
　　　　div.style.left = event.x+document.body.scrollLeft+30;
　　}
　　// 隐藏文件显示层
　　function hiddenDiv()
　　{
　　　　var div= document.getElementById("showFile");
　　　　div.style.display ="none";
　　}
　　// 在iframe中删除文件
　　function delFile( fileUrl )
　　{
　　　　if(!confirm('你确定删除该文件？'))
　　　　return;
　　　　var url = '/fckeditor/del_file.php?filePath='+ fileUrl;
　　　　window.open(url, "iframe_del");
　　　　Refresh();
　　}
　　///*}}}*/

第三步，修改本页面原有js

oListManager.Clear = function()
　　{
　　　　document.body.innerHTML = '' ;
　　}

为：
　　

oListManager.Clear = function()
　　{
　　　　hiddenDiv();
　　　　document.getElementById("body_content").innerHTML = '' ; // body_content为我们在body区域增加的div标签
　　}

　　
　　找到：
　　

var sLink = '<a href="#" onclick="OpenFile(\'' + fileUrl.replace( /'/g, '\\\'') + '\');return false;">' ;

　　修改为：
　　

var sLink = '<a href="#" onmouseover="showDiv(\'' + fileUrl + '\');" onclick="OpenFile(\'' + fileUrl.replace( /'/g, '\\\'') + '\');return false;">' ; // 即是文件信息显示功能

　　修改：
　　

function Refresh()
　　{
　　　　LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ;
　　}

　　为：
　　

　function Refresh()
　　{
　　　　hiddenDiv(); // 所作修改，为了刷新列表时默认隐藏文件显示层
　　　　LoadResources( oConnector.ResourceType, oConnector.CurrentFolder ) ;
　　}

　　修改函数：GetFoldersAndFilesCallBack，找到：
　　

document.body.innerHTML = oHtml.ToString() ;

　　修改为：
　　

document.getElementById("body_content").innerHTML = oHtml.ToString() ;

　　最后，增加一个文件删除页面del_file.php（该文件路径和增加的js函数delFile(fileUrl)中的调用一致），作用为删除文件，给出成功与否的操作提示，参考代码：

<?php
　　$filePath = "..".trim($_GET['filePath']);

　　if ( $filePath )
　　{
　　　　@unlink($filePath);
　　　　echo "<script>alert('删除成功。');</script>";
　　}
　　else
　　{
　　　　echo "<script>alert('删除错误，可能文件不存在或者已经删除。');</script>";
　　}
　　?>

　　至此，我对于fckeditor的修改基本完成，当然这些修改只是对fckeditor修改使用的抛砖引玉，给大家一个参考，希望对初学者有所帮助。后面对编辑器的修改过程比较匆忙，并未修改一步完成一步文档书写，所以，难免有所出错，望见谅，如果你有什么问题和错误发现欢迎联系我互相讨论，共同进步，呵呵。
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

另附：
配置文件（fckconfig.js）中主要配置项目如下，根据自己看情况配置：

FCKConfig.CustomConfigurationsPath = '' ; // 自定义配置文件路径和名称
FCKConfig.EditorAreaCSS = FCKConfig.BasePath + 'css/fck_editorarea.css'; // 编辑区的样式表文件
FCKConfig.BaseHref = ''; // 相对链接的基地址
FCKConfig.Debug = true/false; // 是否开启调试功能，当调用FCKDebug.Output()时，会在调试窗中输出内容
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/default/'; // 设置皮肤
FCKConfig.AutoDetectLanguage = true/false ; // 是否自动检测语言
FCKConfig.DefaultLanguage = 'zh-cn' ; // 设置默认语言
FCKConfig.ContentLangDirection = 'ltr/rtr'; // 默认文字方向，ltr左，rtr右
FCKConfig.FillEmptyBlocks = true/false ; // 使用这个功能，可以将空的块级元素用空格来替代
FCKConfig.FormatSource = true/false; // 切换到代码视图时，是否自动格式化代码
FCKConfig.FormatOutput = true/false; // 当输出内容时是否自动格式化代码
FCKConfig.FormatIndentator = ""; // 当在“源码格式”下缩进代码使用的字符
FCKConfig.GeckoUseSPAN = true/false; // 是否允许SPAN标记代替B，I，U标记
FCKConfig.StartupFocus = true/false; // 开启时是否FOCUS到编辑器
FCKConfig.ForcePasteAsPlainText = true/false;// 强制粘贴为纯文本
FCKConfig.ForceSimpleAmpersand = true/false; // 是否不把&符号转换为XML实体
FCKConfig.TabSpaces = 0/1; // TAB是否有效
FCKConfig.TabSpaces = 4; // TAB键产生的空格字符数
FCKConfig.ShowBorders = true/false; // 是否合并边框
FCKConfig.ToolbarStartExpanded = true/false; // 页面载入时，工具栏是否展开，点“展开工具栏”时才出现
FCKConfig.ToolBarCanCollapse = true/false; // 是否允许展开折叠工具栏
FCKConfig.ToolbarSets = object ; // 编辑器的工具栏，可以自行定义，删减，可参考已存在工具栏
FCKConfig.EnterMode = 'p'; // 编辑器中直接回车，在代码中生成，可选为p | div | br
FCKConfig.ShiftEnterMode = 'br'; // 编辑器中Shift+回车，在代码中生成，可选为p | div | br
FCKConfig.ContextMenu = 字符串数组; // 右键菜单的内容
FCKConfig.FontColors = ""; // 文字颜色列表
FCKConfig.FontNames = ""; // 字体列表
FCKConfig.FontSizes = ""; // 字号列表
FCKConfig.FontFormats = ""; // 文字格式列表
FCKConfig.StylesXmlPath = ""; // CSS样式列表的XML文件的位置
FCKConfig.TemplatesXmlPath = ""; // 模版的XML文件位置
FCKConfig.SpellChecker = "ieSpell/Spellerpages"; // 拼写检查器
FCKConfig.IeSpellDownloadUrl = ""; // 下载拼写检查器的网址
FCKConfig.SmileyPath = FCKConfig.BasePath + 'images/smiley/msn/'; // 表情文件存放路径
FCKConfig.SmileyImages = ''; // 表情文件名称列表，具体参考默认设置
FCKConfig.SmileyColumns = 8; // 表情窗口显示表情列数
FCKConfig.SmileyWindowWidth = 320; // 表情窗口显示宽度，此窗口会因为表情文件的改变而作调整
FCKConfig.SmileyWindowHeight = 240; // 表情窗口显示高度，此窗口会因为表情文件的改变而作调整
FCKConfig.FullPage = true/false; // 是否允许编辑整个HTML文件，还是仅允许编辑BODY间的内容

欢迎光临站长论坛 (http://tzlink.com/bbs/)