PHP中配置Ckeditor+Ckfinder 完成图片上传

[ 2011年11月7日 ]
Tags:  Ckeditor  Ckfinder  

以前一直都用ewebeditor,看很多系统都用CKEDITOR,今天就下载了一个用了一下,但是发现一个很郁闷的问题,CKeditor默认不带图片上传功能,必须借助于另外一个公司开发的产品CKfinder来实现,现在吧方法分享一下:一下方法适用于ASP、 PHP 、ASP.NET、JSP等所有类型的网页

CKeditor文件下载:http://ckeditor.com/download ,目前的最新版本是CKEditor 3.4.2。

CKeditor是完全基于插件,它通过扩展组件以符合具体需求。比如常见的文件上传功能是默认没有的,仅提供了基本的文本编辑功能。要实现图片上传,则需要由另一扩展个组件 CKFinder。

第一:安装配置CKEditor

在扩展CKfinder实现图片上传之前,我们先把最基本的CKeditor编辑器安装一下。

1.  将下载的ckeditor_3.4.2.zip解压,复制目录下的ckeditor文件夹至所需目录,如/include/CKeditor/。

2. 页面引用CKeditor,关键代码如下

第二:安装配置CKfinder

CKfinder是官方组件,下载地址如下:http://ckfinder.com/download (注意:与ckeditor不是同一网站)。

1.  将下载的ckfinder_php_2.0.1.zip 解压,复制目录下的ckfinder文件夹至编辑器目录,/include/CKeditor/。

2.  Ckfinder默认配置是不能上传文件到服务器的,所以要对ckfinder文件下的config.php做修改,将其文件里的CheckAuthentication() 返回值return false 改为return true。

3.  设置文件上传路径。打开上一步中的config.php文件,找到”$baseUrl”,这个变量定义了ckfinder文件上传的目录,将值设为”$baseurl=’/uploadfiles /’,文件上传后程序他会在此目录下自动建立相应的文件夹如image、flash等。

第三:整合,实现图片上传功能

1.  在编辑器页面头部引用ckfinder.js文件,代码如下:

<script type="text/javascript" src="../../include/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="../../include/ckfinder/ckfinder.js"></script>

2.  在编辑器textarea下面引用如下代码:

<textarea name="content"></textarea>
<script type="text/javascript">  
CKEDITOR.replace( 'content',

filebrowserBrowseUrl : '/include/ckfinder/ckfinder.html', 
filebrowserImageBrowseUrl : '/include/ckfinder/ckfinder.html?Type=Images', 
filebrowserFlashBrowseUrl : '/include/ckfinder/ckfinder.html?Type=Flash', 
filebrowserUploadUrl : '/include/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files', 
filebrowserImageUploadUrl : '/include/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images', 
filebrowserFlashUploadUrl : '/include/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
}); 
</script> 

3.测试图片上传,看看是否出现了如下画面,其中红线内的按钮就是上述步骤的成果。

 

怎么样,现在可以上传图片了,很酷吧。

相关文章:
发布:xunzhaohaizi | 分类:网站编程 | 评论:0 | 引用:0 | 浏览:
发表评论