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 οnlοad="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默认情况下只有英文的字体。
转载自:http://blog.sina.com.cn/s/blog_3f8b5ced0100lewh.html