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

所属分类: 网络编程 / 网页编辑器 阅读数: 707
收藏 0 赞 0 分享

开启Fckeditor上传图片功能

  考虑到目录安全性问题,默认Fckeditor2.6.6上传功能并未开启,所以第一步我们必须开启Fckeditor上传功能,这里需要注意,由于PHP版本Fckeditor上传功能需要用到chomod函数对新建目录进行权限设置,所以请务必确认在启用Fckeditor上传功能时PHP环境的用户具有创建和更改上传目录的权限。

  如果没有开启Fckeditor上传功能,在点击插入/编辑图像按钮,选择上传,在选择完要上传的文件后点击发送到服务器上按钮时会报错误信息如下

复制代码 代码如下:

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上传图片功能开启。

  特别提醒:Fckeditor似乎有个BUG漏洞,即JS兼容性还不是太完美,之前我在Google Chrome游览器下设置完后,Fckeditor PHP上传一直实现不了,换了IE后一切正常。

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

  作为独立网站开发者,除了考虑技术还需要兼顾其他方便,比如SEO优化,而目录结构(URL)优化是SEO的一部分,这就需要在设置Fckeditor上传图片功能时考虑图片上传路径问题。

  默认Fckeditor图片上传路径结构有两种形式:userfiles/文件名和userfiles/文件类型/文件名,针对两种Fckeditor上传方式:快速上传(图像属性中的上传)和服务器游览上传(图像属性中的链接),比如上传图片,QuickUpload模式上传路径为userfiles/文件名,服务器游览上传模式上传路径为userfiles/images/文件名。

Fckeditor图片上传路径配置如下

  打开editor/filemanager/connectors/php目录下config.php文件,找到

复制代码 代码如下:

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

更改为

复制代码 代码如下:

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

注意:此处userfiles文件夹是针对http://localhost/的根目录而言的。

  以上是默认Fckeditor上传路径的配置,根据URL规划你可以自定义Fckeditor的上传目录,只要修改config.php文件中的$Config['FileTypesPath']、$Config['FileTypesAbsolutePath']、$Config['QuickUploadPath']、$Config['QuickUploadAbsolutePath']四个上传目录路径的值即可。这种方法一定程度上也能避免Fckeditor上传图片文件名重名问题。

限制Fckeditor上传图片大小设置

  Fckeditor2.6.6默认并没有限制上传图片文件的大小,可以通过两种方法改进,一种可以通过修改PHP.INI配置文件上传大小来限制,另一种方法只能手动修改Fckeditor源码,方法如下

  1、打开editor/filemanager/connectors/php目录下config.php,创建Config变量设置上传图片大小,这里以KB为单位

复制代码 代码如下:

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

2、打开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语句去除,否则实现不了限制Fckeditor上传图片文件大小的功能。

  3、打开editor/dialog/fck_image/fck_image.js,添加错误代码(errorNumber)信息,找到OnUploadCompleted函数,添加

复制代码 代码如下:

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

至此限制Fckeditor上传图片文件大小配置就完成了,其他类型的上传文件大小限制也是这种思路。

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

  经测试Fckeditor2.6.6并没有解决上传文件中文名变为乱码的问题,这是由于Fckeditor实现上传功能时并没有将文件重命名,容易导致上传图片文件重名及乱码问题。

  上传图片文件重名和乱码解决方法如下

  打开editor/filemanager/connectors/php目录下commands.php,找到FileUpload函数,在

复制代码 代码如下:

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

后添加

复制代码 代码如下:

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

此处rand函数可根据需要自行改变重命名规则。

  另一种上传图片文件名乱码解决方法为使用iconv函数对文件名进行编码转换,但仍然存在重名问题,所以针对Fckeditor上传图片文件名最好还是重命名。

Fckeditor上传图片添加水印功能

  对于网站拥有者来说保护图片版权添加水印必不可少,我们可以利用PHP添加水印函数结合Fckeditor文件上传函数FileUpload实现图片添加水印功能,水印函数请参考PHP图片水印函数:支持以图片和文字方式添加水印一文。

  至此Fckeditor在PHP环境下的上传图片配置入门教程就介绍完了。

更多精彩内容其他人还在看

为SyntaxHighlighter添加新语言的方法

因为经常要在博客里贴一些Lua代码,但是所使用的SyntaxHighlighter插件默认不支持Lua语言,所以去研究了一下如何为SyntaxHighlighter添加并激活一个新的语言,这里将过程和有同样需求的童鞋分享
收藏 0 赞 0 分享

syntaxhighlighter 去掉右上角问号图标的三种方法

syntaxhighlighter可以高亮着色显示几乎所有语言形式的源代码,还可以显示行号,是一款深受网站建设人员喜爱的工具,并且它还是免费的
收藏 0 赞 0 分享

百度编辑器ueditor前台代码高亮无法自动换行解决方法

这两天本站成功安装整合了百度编辑器ueditor,用着还挺不错,但是遇到了点小问题
收藏 0 赞 0 分享

FCKeditor 在chrome中不显示问题

今天在使用chrome打开后台的时候,发现FCKeditor编辑器菜单等都不显示,chrome确实不适合后台使用,以后还是继续ie核心的吧
收藏 0 赞 0 分享

ie9后浏览器fckeditor无法上传图片、弹出浮层内容不显示的解决方法

升级到IE9后,fckeditor在IE9里的弹出浮动层会出现bug,里面的内容不会出现。原因是IE9不支持var $=document.getElementById;这样的写法了
收藏 0 赞 0 分享

FCKeditor编辑器添加图片上传功能及图片路径问题解决方法

现在很多CMS系统因为安全原因会把后台编辑器里的上传功能给去除,但这样一来对实际使用过程造成了很多麻烦,今天我们以ASPCMS系统的FCKeditor编辑器为例,说明一下如何增加图片上传功能
收藏 0 赞 0 分享

CKEditor/FCKEditor 使用FCKeditor 2.6.5 快速使用教程(含插入图片)

CKEditor 是著名的 HTML 编辑器,IBM、Oracle、Adobe 等都在用。CKEditor 创建于 2003 年,其前身为 FCKEditor,在 2009 年的时候把“F”去掉了,更名为 CKEditor。
收藏 0 赞 0 分享

CKEditor/FCKEditor 使用 CKeditor 3.0.1 快速使用教程(含插入图片)

一般来说,我们在编辑内容时,先是读入到 textarea,再将 textarea 的内容赋给编辑器。
收藏 0 赞 0 分享

FCKEditor 自定义用户目录的修改步骤 (附源码)

FCKEditor 自定义用户目录的修改步骤 (附源码) ,需要的朋友可以参考下。
收藏 0 赞 0 分享

FCKeidtor 清除编辑器内容的代码

FCKeidtor清除编辑器内容的代码,需要的朋友可以参考下。
收藏 0 赞 0 分享
查看更多