使用Ckeditor+Ckfinder完成图片上传

在介绍CKEditor之前，首先要了解Fckeditor。FCKeditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器，具有轻量化，安装配置的特点，能够和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java等不同的编程语言相结合。“FCKeditor”名称中的“FCK”是这个编辑器的作者的名字Frederico Caldeira Knabben的缩写。

FCKEditor在09年发布更新到3.0，并改名为CKEditor。这就是CKEditor的来源。现在叫CK，意指"Content and Knowledge"。新版的编辑器的更新包括：新的用户界面，一个支持Plug-in的Javascript API，并提供对视觉障碍者的使用支持。"

据官方的解释，CK是对FCK的代码的完全重写，而且此项工作从2007年就开始了，并在今年初发表了多个测试版。至此，为大家服务长达6年的FCKeditor将被CKeditor替代。

CKeditor是完全基于插件，它通过扩展组件以符合具体需求，其主要的特点是：Open Source、Community driven、Fully customizable、Enriches website experience、High standard of quality、Free。不过，有点不如意的是，常见的文件上传功能是默认没有的，要实现图片上传，则需要由另一扩展个组件 CKFinder。

下面从具体的例子开始，使用Ckeditor+Ckfinder实现图片的上传功能。

一、Ckeditor的安装与配置

1．下载、安装和配置CKEditor

打开http://ckeditor.com/download此页面，找到一个版本下载，此处，下载的是ckeditor_4.3.2_full.zip。

将下载的ckeditor_4.3.2_full.zip解压，复制目录下的ckeditor文件夹至一个项目目录下，假如此处的项目文件为：Online_homework，则完成后的目录为：Online_homework\ckeditor。

2．在页面引用CKeditor，关键代码如下：

3．在需要嵌入编辑器的地方引用如下代码：

CKEDITOR.replace('content2');

</script>

至此，默认版CKeditor就已经安装部署好了。

二、CKfinder的安装与配置

CKfinder是官方组件，（注意：与ckeditor不是同一网站）。http://cksource.com/ckfinder/download

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

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

function CheckAuthentication()
{
// WARNING : DO NOT simply return "true". By doing so, you are allowing
// "anyone" to upload and list the files in your server. You must implement
// some kind of session validation here. Even something very simple as...
// return isset($_SESSION['IsAuthorized']) && $_SESSION['IsAuthorized'];
// ... where $_SESSION['IsAuthorized'] is set to "true" as soon as the
// user logs in your system. To be able to use session variables don't
// forget to add session_start() at the top of this file.
//return false;
return true;
}

3．设置文件上传路径。打开上一步中的config.php文件，找到”$baseUrl”，这个变量定义了ckfinder文件上传的目录，根据自己的需求设置。文件上传后程序他会在此目录下自动建立相应的文件夹如image、flash等。

$baseUrl = '/ckfinder/userfiles/';
//$baseUrl = '../uploads/';
/*
$baseDir : the path to the local directory (in the server) which points to the
above $baseUrl URL. This is the path used by CKFinder to handle the files in
the server. Full write permissions must be granted to this directory.
Examples:
// You may point it to a directory directly:
$baseDir = '/home/login/public_html/ckfinder/files/';
$baseDir = 'C:/SiteDir/CKFinder/userfiles/';
// Or you may let CKFinder discover the path, based on $baseUrl.
// WARNING: resolveUrl() *will not work* if $baseUrl does not start with a slash ("/"),
// for example if $baseDir is set to  http://example.com/ckfinder/files/
$baseDir = resolveUrl($baseUrl);
ATTENTION: The trailing slash is required.
*/
$baseDir = resolveUrl($baseUrl);

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

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

2．在编辑器textarea下面引用如下代码：

<textarea  id="content1" name="tmnr"></textarea>
<script  type="text/javascript">
CKEDITOR.replace('content1',{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．完成后的界面如下：

到这里，基本完成一个默认配置的上传图片的功能。在这里需要说明的是：由于CKFinder 是收费的，所以还需要破解一下，网上有，可以找到的，这里有一个地址：http://kingplesk.org/2012/11/php-ckeditor%E6%95%B4%E5%90%88ckfinder-2-3-%E7%A0%B4%E8%A7%A3/。

使用Ckeditor+Ckfinder完成图片上传相关推荐

ckeditor finder php,CKEDITOR CKFINDER的图片上传配置(C#/asp.net/php)
CKEDITOR+CKFINDER的图片上传配置(C#/asp教程.net/php教程) php keditor的代码全部重写,但里面没有了上传功能,只是一个纯粹的文件在线编辑器,如果需要上传图片,还 ...
ckfinder php 配置,PHP中Ckeditor+Ckfinder配置图片上传功能_PHP教程
从标题来看我们知道Ckeditor不支持图片上传功能,它是需要一个组件Ckfinder才可以支持上传图片, 本文章就来详细的介绍了如何配置Ckeditor+Ckfinder实现图片上传的功能. 第一: ...
在ASP.NET项目中使用CKEditor +CKFinder实现图片上传功能
前言之前的项目中一直使用的是FCKeditor,昨天突然有个想法:为什么不试一下新的CKEditor呢?于是花了大半天的时间去学习它的用法,现在把我的学习过程与大家分享一下. 谈起FCKeditor ...
C# ckeditor+ckfinder的图片上传配置
CKEditor和CKFinder的最新版可以到官方网站(http://cksource.com)上下载获得. 把以上两个资源放到网站的根目录: /CKEditor 和 /CKFinder (不区分大 ...
SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传
SpringMVC:学习笔记(10)--整合Ckeditor且实现图片上传配置CKEDITOR 精简文件解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可 ...
富文本编辑器CKEditor配置及图片上传配置
一.ckeditor4的配 1.下载ckeditor4 进入官网https://ckeditor.com/ckeditor-4/download/可以直接点击下载,也可以下拉到 CKEditor 4 ...
.net_ckeditor+ckfinder的图片上传配置
CKEditor和CKFinder的最新版可以到官方网站(http://cksource.com)上下载获得. 把以上两个资源放到网站的根目录: /CKEditor 和 /CKFinder (不区分大 ...
第12章[12.10.1] Ext JS + CKEditor+Spring Boot 实现编辑器图片上传
CKEditor 支持多种图片上传实现方式, 可以直接使用CKEditor 提供的云服务,不过这个服务是收费的, 而且上传的图片如果安全性要求较高,该方式可能不适合.本篇基于Spring Boot实现 ...
PHP+CKEditor 3配置详细说明(包括图片上传)
首先,我们要在页面中加入CKEditor的js文件: <head> ... <script type="text/javascript&qu ...

使用Ckeditor+Ckfinder完成图片上传

使用Ckeditor+Ckfinder完成图片上传相关推荐

最新文章

热门文章