文档章节

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

京宝
 京宝
发布于 2012/07/20 18:31
字数 666
阅读 1654
收藏 2

用久了fckeditor,看惯了其略显陈旧的界面,听说其弟弟CKeditor更酷更炫,今天就来试试吧。CKeditor文件下载:http://ckeditor.com/download ,目前的最新版本是CKEditor 3.4.2。

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

第一:安装配置CKEditor

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

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

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

<script type="text/javascript" src="http://blog.163.com/chudaozhe@126/blog/ckeditor/ckeditor.js"></script> <textarea cols="80" name="content" rows="10"></textarea>
至此,默认版CKeditor就已经安装部署好了,此时你可以通过修改/admin/ckeditor/ckeditor.js来配置编辑器,如字体、背景色、语言、界面高宽、编辑器按钮分布等,详细参数见官方文档:

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.autoUpdateElement

把需要设置的内容加入此函数中间即可。

CKEDITOR.editorConfig = function( config )           {           // Define changes to default configuration here. For example:           // config.language = 'fr';           // config.uiColor = '#AADC6E';           };

第二:安装配置CKfinder

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

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

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

function CheckAuthentication()     {           return false;//改为return false     }

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

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

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

<script type="text/javascript" src="http://blog.163.com/chudaozhe@126/blog/ckeditor/ckfinder/ckfinder.js"></script>

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

    <script type="text/javascript">     CKEDITOR.replace( 'editor1',     {     filebrowserBrowseUrl : 'ckeditor/ckfinder/ckfinder.html',     filebrowserImageBrowseUrl : 'ckeditor/ckfinder/ckfinder.html?Type=Images',     filebrowserFlashBrowseUrl : 'ckeditor/ckfinder/ckfinder.html?Type=Flash',     filebrowserUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',     filebrowserImageUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',     filebrowserFlashUploadUrl : 'ckeditor/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'     });     </script>

3.测试图片上传,看看是否出现了如下画面,其中红线内的按钮就是上述步骤的成果。
PHP中配置Ckeditor+Ckfinder 完成图片上传 - Wei -

本文转载自:http://blog.163.com/chudaozhe@126/blog/static/115732343201231210272814/

京宝

京宝

粉丝 59
博文 169
码字总数 97582
作品 1
朝阳
CTO(技术副总裁)
私信 提问
KindEditor之本地图片上传

今日整合某项目的博客发表功能,需要用到在线编译器,在网上搜索了一大堆后决定采用ckeditor+ckfinder,但是使用过程中发现此插件太大,且自定义,权限方面的配置工作过于复杂,加之国内中文...

why001234
2012/06/18
1K
2
jsp中如何整合CKEditor+CKFinder实现文件上传

最近笔者做了一个新闻发布平台,放弃了之前的FCKEditor编辑器,使用了CKEditor+CKFinder,虽然免费的CKFinder是Demo版本,但是功能完整,而且用户都是比较集中精神发新闻的人,不会在意这个。...

teacheryang
2016/10/08
0
0
JFinal整合CKFinder

使用JFinal对之前的系统进行重构,老系统使用了CKEditor+CKFinder编辑器,发现在web.xml中配置ConnectorServlet会被JFinalFilter过滤处理,而且使用JFinal之后也不想在web.xml中增加额外的配...

pandyyan
2013/05/13
401
0
08-05更新ThinkPHP+swfupload多图上传实例 经典实用的php多图上传

先上一张图片给大家看看效果,有需要就下载学习。不一定非要在ThinkPHP里,只是我非常喜欢去用ThinkPHP做开发了。 好了。现在咱们需要的东西是,下载一个swfupload.js网上很多,自己百度吧....

3147972
2014/03/21
0
0
samba共享目录构建wordpress与mysql

项目一 (1) 使用samba共享/data/application/web,在目录中提供wordpress; (2) 使用samba客户端挂载samba server共享的目录至/var/www/html; (3) 客户端(lamp),部署wordpress,并让其正常访...

wujunqi1996
2018/06/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

nginx+tomcat配置https

1、nginx配置https和【proxy_set_header X-Forwarded-Proto $scheme;】 2、java代码: String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServe......

perofu
17分钟前
4
0
必看的Linux系统新手进阶老手心得

不知道从什么时候起,linux这个话题变得越来越普及,成为大家经常讨论的话题。无论在网络上还是实际生活中,竟然很多人都在纠结学习linux的问题。网络上给的答案千千万万,而却还有很多人踌躇...

Linux就该这么学
20分钟前
4
0
Spring Boot 配置元数据指南

1. 概览 在编写 Spring Boot 应用程序时,将配置属性映射到 Java bean 上是非常有用的。但是,记录这些属性的最好方法是什么呢? 在本教程中,我们将探讨 Spring Boot Configuration Proces...

liululee
24分钟前
3
0
foreach查找子类

$list = $menu_model -> menu_list();$parent_list = [];foreach ($list as $v){ if ($v['pid'] == 0) { $parent = $v; foreach ($list as $v1) ......

小小小壮
35分钟前
3
0
基于 HTML5 Canvas 实现的 TP-LINK 电信拓扑设备面板

前言 今天我们以真实的 TP-LINK 设备面板为模型,完成设备面板的搭建,和指示灯的闪烁和图元流动。 先来目睹下最终的实现效果:http://www.hightopo.com/demo/blog_tplink_20170511/index.h...

htdaydayup
41分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部