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

原创 2012年03月30日 18:10:00

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里面编辑的完全一样的内容。在服务器端可以把收到的内容保存到数据库中。然后再读出在相应的页面显示出来。

版权声明:本文为博主原创文章,未经博主允许不得转载。

PHP中使用CKEditor上传图片

Ckeditor下载地址:http://ckeditor.com/download 1、在页面中引入ckeditor核心文件ckeditor.js2、在使用编辑器的地方插入HTML控件...
  • vailook
  • vailook
  • 2017年09月25日 11:29
  • 705

ckeditor和ckfinder配合使用上传图片

在我的down中下载 ckeditor和ckfinder包 把ckeditor和ckfinder两个文件夹解压到同一个文件夹下 c#下新建asp web 窗体应用 在项目目录下拉入解压出...
  • qq_32454729
  • qq_32454729
  • 2016年10月30日 18:46
  • 148

ckeditor批量上传图片(下)

在前篇博文中关于ckeditor批量上传图片讲解了如何添加一个插件,但是还没有上传图片的功能,现在,且简单讲讲如何实现这个功能! 这个功能的实现主要依赖于image.html和image_uploa...
  • QiuDW_01
  • QiuDW_01
  • 2015年08月19日 16:53
  • 1613

CKFinder(php版)的使用,以及与现有的CKEditor的集成

第一部分:先决条件1,首先确认,已安装了apache和php,并整合了apache和php和tomcat。2,在apache中创建虚拟目录如在apache配置文件httpd.conf中加上一个虚拟目录...
  • suncaishen
  • suncaishen
  • 2011年02月27日 15:54
  • 5628

CKEditor与CKFinder学习--整合SpringMVC

ckeditor与ckfinder整合,jsp页面引入,springmvc框架
  • frankcheng5143
  • frankcheng5143
  • 2016年03月17日 14:18
  • 5528

Laravel 5.2 使用ckeditor 及 ckfinder

上一篇已经说过如何让ckeditor能上传图片。 这篇讲下如何使用ckfiner来做文件浏览及管理。 1,下载finder。解压到/public。 我的目录是这样: /public/finder/3....
  • HOOLOO
  • HOOLOO
  • 2016年04月05日 16:25
  • 1882

ckeditor批量上传图片(上)

什么都不说,先上图··· 好了!现在该说说了··· ckeditor本身已经不提供批量传图功能了,想要传图,要么点一张传一张,要么就是想尽一切办法自己添加这个功能插件!网上不乏ckeditor+S...
  • QiuDW_01
  • QiuDW_01
  • 2015年08月18日 17:51
  • 3129

ckeditor的简单使用以及多张图片上传插件的制作

C# MVC下ckeditor的单张和多张图片上传插件的制作
  • a851656458
  • a851656458
  • 2017年10月10日 17:00
  • 444

CKEditor+CKFinder+php使用心得

最近由于工作需要,一次性需要把所有的编辑器改进成CKEditor,不过这玩意没有上传功能,只好找到它的姐妹产品CKFinder。网上一查,才知道这两东西合伙才有希望完成上传等诸多功能。 由于之前...
  • china_skag
  • china_skag
  • 2014年09月28日 11:25
  • 3617

ASP.NET项目中使用CKEditor +CKFinder 实现上传图片

CKEditor是什么 CKEidtor是一个在线富文本编辑器,可以将让用户所见即所得的获得编辑在线文本,编辑器或自动将用户编辑的文字格式转换成html代码。 在ASP.NET工程中添加CKEdit...
  • qq_27010621
  • qq_27010621
  • 2015年06月27日 10:44
  • 1324
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:在 PHP 里 使用 CKEditor 和 CKFinder 插件上传图片.
举报原因:
原因补充:

(最多只允许输入30个字)