针对PHP环境下Fckeditor编辑器上传图片配置详细教程

对于PHP开发者来说，Fckeditor的配置总是绕不开的几个坑之一。先说一个最常见的场景：你兴冲冲地装好了编辑器，点开“插入图片”按钮，结果上传功能压根用不了。这其实不怪你，因为考虑到目录安全，Fckeditor 2.6.6 默认把上传功能“关”了起来。所以，第一步就是把它打开。

这里需要特别留意一点：PHP 版本的上传功能依赖 chmod 函数去设置新建目录的权限。也就是说，你在启用上传之前，得先确保 PHP 运行环境有权限创建和修改上传目录。否则，后面折腾半天也是白搭。

如果没开启上传功能，点击“插入/编辑图像”按钮，再切换到“上传”标签页，选好文件后点“发送到服务器上”，就会看到这样的报错：

This file uploader is disabled.     
Please check the "editor/filemanager/connectors/php/config.php" file  

根据错误信息的指引，打开 editor/filemanager/connectors/php/config.php，找到这一行：

$Config['Enabled'] = false ;

把它改成：

$Config['Enabled'] = true ; 

然后在相应目录下建个 userfiles 文件夹，上传功能就算打开了。不过，这里有个小插曲不得不提：Fckeditor 的 JS 兼容性有点“水土不服”。之前我在 Chrome 下怎么折腾都不行，换到 IE 后一切正常。如果你也遇到类似的情况，不妨换个浏览器试试。

Fckeditor 上传图片时上传路径配置教程

作为一个独立开发者，除了技术实现，还得考虑 SEO 优化。目录结构（也就是 URL 结构）是 SEO 的一部分，所以设置上传路径时，就不能随便来了。

Fckeditor 默认有两种图片上传路径结构：一种是 userfiles/文件名，另一种是 userfiles/文件类型/文件名。对应到上传方式上，快速上传（图像属性里的“上传”标签）走的是前一种，而服务器浏览上传（图像属性里的“链接”标签）走的是后一种。比如上传图片，QuickUpload 模式会把文件扔到 userfiles/文件名，而服务器浏览模式则会放到 userfiles/images/文件名。

那怎么配置呢？打开 editor/filemanager/connectors/php/config.php，找到：

$Config['UserFilesPath'] = '/userfiles/' ;  

改成你项目的实际路径：

$Config['UserFilesPath'] = '/项目目录/userfiles/' ;

注意，这里的 userfiles 文件夹是相对于 http://localhost/ 根目录而言的。除了默认配置，你还可以根据实际 URL 规划自定义上传目录。只要修改 FileTypesPath、FileTypesAbsolutePath、QuickUploadPath、QuickUploadAbsolutePath 这四个路径变量就行。这种方法还有个好处——能在一定程度上避免上传图片时文件名重名的问题。

限制 Fckeditor 上传图片大小设置

Fckeditor 2.6.6 默认不限制上传图片的大小，这显然不太安全。有两种方法可以解决：一是修改 php.ini 里的上传大小限制，二是手动改 Fckeditor 的源码。这里重点说说后者。

首先，打开 editor/filemanager/connectors/php/config.php，创建一个配置变量来设置上传图片大小（以 KB 为单位）：

$Config['MaxImageSize']= '1024';  

然后，打开 editor/filemanager/connectors/php/commands.php，找到这段代码：

if ( isset( $Config['SecureImageUploads'] ) )   
{   
    if ( ( $isImageValid = IsImageValid( $oFile['tmp_name'], $sExtension ) ) === false )   
    {   
        $sErrorNumber = '202' ;   
    }   
    //上传图片大小限制   
}  

在“上传图片大小限制”的位置，添加如下代码：

if ( isset( $Config['MaxImageSize'] ) )   
{   
    $iFileSize = round( $oFile['size'] / 1024 );   
    if($iFileSize > $Config['MaxImageSize'] )   
    {   
        $sErrorNumber = '204';   
    }   
}  

原理很简单：PHP 计算上传文件大小是以字节为单位的，所以先把文件大小折算成 KB，再跟设定的上限做对比，超出就报错。

接下来，找到这段代码：

if ( !$sErrorNumber && IsAllowedExt( $sExtension, $resourceType ) )   
{   
    //Fckeditor上传图片功能   
}   
else  
    $sErrorNumber = '202' ;  

把结尾的 else 语句去掉，否则限制功能不会生效。

最后，打开 editor/dialog/fck_image/fck_image.js，找到 OnUploadCompleted 函数，添加错误代码信息：

case 204 :   
    alert( "Security error. File size error." ) ;   
    return ;  

至此，限制上传图片大小的配置就完成了。其他类型的文件上传大小限制，思路是一样的。

Fckeditor 上传图片文件名重名及中文乱码解决方法

实测下来，Fckeditor 2.6.6 并没有解决中文文件名乱码的问题。说白了，就是上传功能没有自动重命名文件。这就导致两个麻烦：上传同名文件，后上传的会直接覆盖前面的；上传中文名文件，服务器上直接显示乱码。

解决起来也不复杂。打开 editor/filemanager/connectors/php/commands.php，找到 FileUpload 函数，定位到这两行：

$sExtension = substr( $sFileName, ( strrpos($sFileName, '.') + 1 ) ) ;   
$sExtension = strtolower( $sExtension ) ;

在它们后面加上：

$sFileName = rand(0,100).".".$sExtension;  

这里用 rand 函数只是个示例，你可以根据实际需求自行设计重命名规则，比如用时间戳加随机数。另一种思路是用 iconv 函数对文件名做编码转换，但重名问题依然存在。所以，最稳妥的办法还是直接重命名文件。

Fckeditor 上传图片添加水印功能

网站所有者通常都希望保护图片版权，添加水印功能很有必要。利用 PHP 的图片水印处理函数，结合 Fckeditor 的 FileUpload 函数，就能实现上传时自动添加水印。具体的水印函数实现，可以参考专门的 PHP 图片水印教程（支持图片和文字两种方式）。

好了，Fckeditor 在 PHP 环境下的上传图片配置入门教程就到这里。从开启功能、配置路径，到限制大小、解决乱码，再到添加水印，每一步都算得上是一线开发者会遇到的实战问题。希望这些内容能帮你少走一些弯路。