本文详细介绍了如何将CKEditor与CKFinder集成到网页中，并实现上传文件的功能。包括CKEditor与CKFinder的下载、解压、配置及服务器端的PHP代码实现，以及上传文件的其他必要配置。
CKEditor是一个专门使用在网页上属于开放源代码的所见即所得文字编辑器，FCKeditor是它的前身。CKEditor不提供文件上传功能，如果要实现上传功能则需要使用CKFinder。
1、下载CKEditor和CFinder
CKEditor下载地址：http://ckeditor.com/download
CKFinder下载地址：http://ckfinder.com/download
2、解压安装
将CKEditor解压之后，将其中的ckeditor放到网站根目录下
将CKFinder解压之后，将其中的ckfinder放到/ckeditor/下
3、客户端网页代码
包括加载ckeditor.js、加载ckfinder.js、创建CKEditor实例、为CKFinder设置CKEditor。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CKEditor and CKFinder</title>
<script language="javascript" type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script language="javascript" type="text/javascript" src="ckeditor/ckfinder/ckfinder.js"></script>
<script language="javascript" type="text/javascript">
function init(){
if (typeof CKEDITOR == 'undefined') {
alert('加载CKEditor失败');
}
else {
var editor = CKEDITOR.replace( 'editor1' );
CKFinder.setupCKEditor( editor, '/ckeditor/ckfinder/' );
}
}
</script>
</head>
<body onload="init();">
<form action="editor.php" method="post">
<textarea cols="80"; name="editor1" rows="10"></textarea>
<input type="submit" value="提交" />
</form>
</body>
</html>
4、服务器PHP代码
写一个editor.php用来接收CKEditor传过来的数据，通过客户端网页textarea名字作为字段名来从$_POST中获取。传过来的数据是通过转义了的，所有的',",\前面都加上了反斜杠，所以如果要将数据存数据库，数据不需要再转义。如果要将数据直接当成网页代码显示，则在echo之前需要调用stripslashes将所有的反斜杠去掉。
<?php
$content=$_POST['editor1'];
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CKEditor and CKFinder serverside</title>
</head>
<body>
<?php
echo stripslashes($content);
?>
</body>
</html>
5、实现上传文件功能的其他必要配置
（1）/ckeditor/ckfinder/config.php
将其中的$baseUrl设置为$baseUrl = '/ckeditor/ckfinder/userfiles/';，这个设置的是上传文件的存放位置
将其中CheckAuthentication中的return false;改为return true;，这个是设置上传权限，如果只让授权用户上传文件，那么这里可以通过SESSION做一些处理，比如SESSION里有一个字段表示用户是否是已经登录过，是就return true，否就return false。
function CheckAuthentication(){
return true;
}
（2）/ckeditor/config.js
在CKEDITOR.editorConfig = function( config )函数体中添加一句：
config.font_names = '宋体;楷体_GB2312;新宋体;黑体;隶书;幼圆;微软雅黑;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana;';
这里设置CKEditor中能使用的字体，CKEditor默认情况下只有英文的字体。
扫一扫
654
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
