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

梵谷的皇心

浏览: 21522 次

最近访客更多访客>>

957484162

乌龟漫游

297135747

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

php开发笔记

ckeditor ckfinder php 图片上传

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的方式调用

<html>
<head>
    <title>Sample CKEditor Site</title>
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>
<body>
    <form method="post">
        <p>
            My Editor:<br />
            <textarea id="editor1" name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
            <script type="text/javascript">
                CKEDITOR.replace( 'editor1' );
            </script>
        </p>
        <p>
            <input type="submit" />
        </p>
    </form>
</body>
</html>

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

2）用PHP的方法引入

<p>Title:</p><input name="subject" type="text" >

<?php
include 'ckeditor/ckeditor.php'; //include ckeditor.php
$ckeditor = new CKEditor;
$ckeditor->editor('content');

?>

<input name="submit" type="submit" value="提交"  />

这样既可以使用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文件，代码如下：

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

最后就是使用ckfinder

<script>	
CKEDITOR.replace(  'editor1',
{
filebrowserBrowseUrl :  'browser/browse.php',
filebrowserUploadUrl :  'uploader/upload.php',
filebrowserImageWindowWidth :  '640',
filebrowserImageWindowHeight : '480',

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

</script>

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

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

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