在介绍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,关键代码如下:
<script type="text/javascript" src="../ckeditor/ckeditor.js"></script>
3.在需要嵌入编辑器的地方引用如下代码:
<textarea id="content2" name="tmda"></textarea>
<script type="text/javascript">
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文件,代码如下:
<script type="text/javascript" src="../ckeditor/ckfinder/ckfinder.js"></script>
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/。