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

所属分类: 网络编程 / 网页编辑器 阅读数: 792
收藏 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环境下的上传图片配置入门教程就介绍完了。

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

在asp.net中KindEditor编辑器的使用方法小结

由于国外的服务器好象对一些要引用dll编辑器由于安全问题,锁定了web.config中的一些权限,在先试了FreeTexbox不行,FCKEditor也不行,因为都是要引用dll文件,最后同事介绍一款 纯js的kindeditor编辑器,
收藏 0 赞 0 分享

FCK判断内容是否为空(如果只是去空格,那么这种方式是错误的)

一般来说,像input里面的值都可以通过将内容去空格判断是否为空,但是FCK没那么简单,因为当你多打几个空格或者多打一些回车,它会自动地生成一些<p>标签,如果再用原先去空格判断的方法,显然是不可取的。
收藏 0 赞 0 分享

当使用ckeditor控件时,需要校验输入内容是否为空的一种解决办法(转帖)

这样是我们写程序中最经常的写法 提交之前进行验证内容是否为空!
收藏 0 赞 0 分享

FCKeditorAPI 手册 js操作获取等

FCKeditorAPI 手册 js操作控制,获取等函数代码,使用网页编辑器的朋友可以参考下。
收藏 0 赞 0 分享

autogrow 让FCKeditor高度随内容增加的插件

让FCKeditor高度随内容增加的插件,这个插件在默认情况下可能运行不正常,必须做一点修改才可以。
收藏 0 赞 0 分享

自己打造HTML在线编辑器的实现难点分析

到目前为止,我已经开发了两个HTML编辑器了,一个用在公司的CMS项目,另一个用在这个Blog(TidyEditor,暂时没有单独发布)。下面总结一下开发的难点以及应对方法。
收藏 0 赞 0 分享

常用网页编辑器漏洞手册(全面版)fckeditor,ewebeditor

常用网页编辑器漏洞手册(全面版)fckeditor,ewebeditor,使用这类编辑器的朋友一定要注意下。
收藏 0 赞 0 分享

myFocus 一个KindEditor的焦点图插件

使用KindEditor(富文本编辑器)提供的接口将myFocus(焦点图库)集成在KindEditor上
收藏 0 赞 0 分享

通过Fckeditor把图片上传到独立图片服务器的方法

大部分网站的后台,都是把图片上传到本地服务器上,但图片也消耗很多带宽,门户网站都有单独的图片服务器,怎么实现呢?
收藏 0 赞 0 分享

eWebEditor 辑器按钮失效 IE8下eWebEditor编辑器无法使用的解决方法

最近我把IE浏览器更新到了IE8.0,在用eWebEditor在线HTML文本编辑器的时候点击eWebEditor上的所有编辑按钮都没用,只看到浏览器状态栏左下角显示网页上有错误,于是上网查了一下。终于找到解决的方法,测试后正常。
收藏 0 赞 0 分享
查看更多