逛奔的蜗牛

我不聪明,但我会很努力

   ::  :: 新随笔 ::  ::  :: 管理 ::

在 PHP 里 使用 CKEditor 和 CKFinder 插件上传图片.


1. 下载安装 CKEditor: 

http://ckeditor.com/

解压下载到的CKEditor放到网站的路径中即可

2. 下载安装 CKFinder:

http://ckfinder.com/download

解压下载到的CKEditor放到与CKEditor同一目录中即可


3. 在网页中使用 CKEditor 和 CKFinder:

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

最简单的方法,直接使用下面的例子修改一下即可。可以在网页中看到 CKEditor 了,兴奋吧。

<html>

<head>

    <meta http-equiv="Content-type" content="text/html; charset=UTF-8">

    <title>CKEditor</title>

</head>

<body>

    <form action="b.php" method="post">

        <textarea name="editor1">CKEditor Demo</textarea>

        <input type="submit" name="submit" value="Submit" />

    </form>

</body>


<script src="ckeditor/ckeditor.js"></script>

<script type="text/javascript">

    // 启用 CKEitor 的上传功能,使用了 CKFinder 插件

    CKEDITOR.replace( 'editor1', {

        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>

</html>


4. 配置CKFinder进行上传图片,Flash等。


到这里,点击 "Image" 按钮,在弹出的窗口中的 "Upload" 标签中已经看到上传按钮了,但是在上传文件时失败。因为CKFinder还没有配置好。需要创建上传文件的目录和修改 ckfinder/config.php 里的三个地方:

a. 创建保存上传文件的目录,如uploads

其路径为/Users/Biao/Sites/php/uploads/

[For Linux: 把其权限设置为php server可读写,最简单的是 chmod 777 uploads 这样php server才有权限往里面保存文件.]


b. 找到配置文件第32行,把 function CheckAuthentication() { return false; }

修改成 function CheckAuthentication() { return true; }


c. 找到第63行,把 $baseUrl 的值改成保存上传文件存目录的URL,

如 $baseUrl = '/~Biao/php/uploads/';

怎么取得这个 URL 呢?其实很简单,在这个uploads文件夹里创建一个简单的path.php文件:

<?php echo $_SERVER["PHP_SELF"] ?>,然后从浏览器里访问,

就可以得到 /~Biao/php/uploads/path.php,

则 uploads 文件夹的URL是 /~Biao/php/uploads/


d. 找到第82行,删除 $baseDir = resolveUrl($baseUrl); 修改 $baseDir 为上传文件目录的绝对路径

$baseDir = '/Users/Biao/Sites/php/uploads/';

是因为resolveUrl($baseUrl)函数不能正常工作。


至此,可以使用 CKEditor 和 CKFinder 上传文件了。


对上面这个小例子中服务器端的b.php代码:

<?php

header("Content-Type:text/html; charset=utf-8");

$str = $_POST['editor1'];

echo $str;

?>


可以看到,在点击submit按钮后,服务器端收到了CKEditor中的内容,并使用echo输出,生成一个与CKEditor里面编辑的完全一样的内容。在服务器端可以把收到的内容保存到数据库中。然后再读出在相应的页面显示出来。


 


CKEditor 界面:


上传界面:


 



posted on 2010-11-02 03:19 逛奔的蜗牛 阅读(6712) 评论(7)  编辑 收藏 引用 所属分类: 其他编程

评论

# re: PHP:使用CKEditor和CKFinder上传图片,Flash,文件等 2010-11-16 14:59 加加
CKFinder注册号有吗?  回复  更多评论
  

# re: PHP:使用CKEditor和CKFinder上传图片,Flash,文件等 2011-05-11 10:53 - -
配置操作完成,为什么上传不上去  回复  更多评论
  

# re: PHP:使用CKEditor和CKFinder上传图片,Flash,文件等[未登录] 2011-07-05 13:41 me
感谢!问题已经解决!  回复  更多评论
  

# re: PHP:使用CKEditor和CKFinder上传图片,Flash,文件等 2011-08-15 10:46 hiochou
好文章,简单易懂!  回复  更多评论
  

# re: PHP:使用CKEditor和CKFinder上传图片,Flash,文件等 2012-09-28 10:18
我配置的一切正常,就是不能显示缩略图,这是怎么回事啊~~~我配置文件里面缩略图是打开的~  回复  更多评论
  

# re: PHP:使用CKEditor和CKFinder上传图片,Flash,文件等 2014-11-18 11:09 xs
为什么我上传的时候第一个路径不对开不开,第二个打开了的话显示ERROR200 求高手指点  回复  更多评论
  


只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   博问   Chat2DB   管理