PHP中Ckeditor利用Ckfinder实现图片上传功能

阅读更多

 

PHP怎么给ckeditor编辑器加上传图片的功能？CKEditor官方演示是有上传图片和浏览服务器文件功能的，但是我们自己下载回来的却没有这两个功能……

其实还需要下载另外一个组件：CKFinder，用它配合CKEditor来实现上传功能。

官方提供了PHP，Asp.Net和Asp三个语言版本的CKFinder

    本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能

第一：配置CKEditor（详见下一篇ckeditor的使用）

 

1． 将下载的ckeditor_4.1.1.zip解压，复制目录下的ckeditor文件夹至所需目录，如/admin/。

2. 安装配置CKEditor ，可改/admin/ckeditor/ckeditor.js来配置编辑器（详细的配置详见下一篇ckeditor编辑器的配置）

   1）用js的方式调用

 

    
    


    

        

            My Editor:

            <p>Initial value.</p>
            
        
        

            
        
    

 CKEditor 实际是替换一个 textarea 标签，所以把textarea放到一个form中，当提交到php服务器端，使用$_GET['xxx'] 或者 $_POST['xxx'] 取得编辑好的数据。注意，因为 CKEditor 要替换 textarea，所以相应的javascript 代码"CKEDITOR.replace(xxxxxx)" 要放在 textarea 的后面。

2）用PHP的方法引入

Title:


editor('content');

?>

 

 

 

这样既可以使用ckeditor，效果图在附件ckeditor效果图中

第二步，配置CKfinder

 

CKfinder是官方组件

1．  将下载的ckfinder_php_2.0.1.zip 解压，复制目录下的ckfinder文件夹至编辑器目

录，/admin/ckeditor。

2、加入ckfinder，把ckfinder和ckeditor放在同级目录下。
打开/ckfinder/config.php,  首先设置第一个函数CheckAuthentication()，这个函数需要按照自己的规则写，只要return  true的情况才能允许上传文件到服务器的，当然不建议直接写return true，这将导致安全问题。可以采用session来处理比较方便。

config.php这样修改：

 

function CheckAuthentication()
{
	return true;
}

  找到”$baseUrl”，这个变量定义了ckfinder文件上传的目录，将值设为 $baseUrl = '/ckfinder/userfiles/';，

 

文件上传后程序他会在此目录下自动建立相应的文件夹如image、flash等。

第三：整合，实现图片上传功能

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

 

 最后就是使用ckfinder

 

 

 配置完成后既可以实现图片上传，附件中有效果图

 

参考地址：http://www.111cn.net/phper/php/42156.htm

            http://www.cnblogs.com/mrlaker/archive/2012/09/07/2674428.html

• 
• 大小: 14.8 KB

• 
• 大小: 21.4 KB

• 
• 大小: 8.7 KB

• 
• 大小: 107.4 KB

• 查看图片附件