FCKeditor是sourceforge.net上面的一个开源项目,主要是实现在线网页编辑器的功能,官方网站为 http://www.fckeditor.net ,在服务器端支持ASP.Net、ASP、ClodFusion、PHP、Java等语言,并且支持 IE 5+、Mozilla 、Netscape等主流浏览器。目前最新版本为2.0 Beta 2,但是目前2.0 Beta版还不支持PHP,所以这里我选择使用了1.6版本。
首先我们先到http://sourceforge.net/projects/fckeditor/ 下载 FCKeditor_1.6.zip,并将其解压缩到你的网站子目录里面,并将文件夹名改为FCKeditor。进入到FCKeditor/目录下,打开 _test/目录,里面含有各种编程语言调用FCKeditor的方法,其中与PHP有关的文件有2个文件:
test.php //提交数据页面
testsubmit.php //显示数据页面
大家可以看一下,了解FCKeditord的调用方法,下面是我简写了一个test程序:
<?php
if($_POST["ADD"]){
$Content=$_POST['EditorDefault'];
echo $Content;
//变量$Content就是我们在FCKeditord里面编辑的内容,这里可以将其保存到数据库里面
}
?>
<html>
<head>
<?php
//引入在线编辑器
include("../FCKeditor/fckeditor.php") ;
?>
</head>
<body>
<br>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" language="javascript">
<?php
$oFCKeditor = new FCKeditor ;
// FCKeditor所在目录,[b:91beb51adf]这个路径一定要和上面那个引入路径一致,否则会报错:找不到fckeditor.html页面[/b:91beb51adf]
$oFCKeditor->BasePath = '../FCKeditor/' ;
// 将FCKeditor实例化
$oFCKeditor->CreateFCKeditor( 'EditorDefault', '100%', 300 ) ;
?>
<INPUT type="submit" name="ADD" value="提交">
</form>
</body>
</html>
从上面的例子中我们可以看到要使用FCKeditor,首先要执行
include("../FCKeditor/fckeditor.php") ;语句来引用FCKeditor。然后执行
$oFCKeditor = new FCKeditor ;
$oFCKeditor->BasePath = '../FCKeditor/' ;
$oFCKeditor->CreateFCKeditor( 'EditorDefault', '100%', 300 ) ;
来实例化FCKeditor,如果是编辑页面则再加入一行:
//$Content可以是从数据库中读取出来的数据
$oFCKeditor->Value = $Content ;
默认情况下,上传图片功能仅对应于ASP方式,要想实现在PHP下上传文件,还得对FCKeditor的配置文件进行修改。打开 / FCKeditor/js/fck_config.js(这是FCKeditor的主配置文件),定位到文件的最下面那段被//注释掉的内容,将
//##
//## Image Browsing
//##
config.ImageBrowser = true ;
// Custom Page URL
config.ImageBrowserURL = config.BasePath + "filemanager/browse/sample_html/browse.html" ;
//config.ImageBrowserURL = config.BasePath + "filemanager/browse/sample_php/browse.php" ;
//config.ImageBrowserURL = config.BasePath + "filemanager/browse/sample_jsp/browse.jsp?type=img" ;
//config.ImageBrowserURL = config.BasePath + "filemanager/browse/sample_asp/browse.asp" ;
//##
//## Image Upload
//##
config.ImageUpload = true ;
// Page that effectivelly upload the image.
config.ImageUploadURL = config.BasePath + "filemanager/upload/asp/upload.asp" ;
//config.ImageUploadURL = config.BasePath + "filemanager/upload/aspx/upload.aspx" ;
//config.ImageUploadURL = config.BasePath + "filemanager/upload/cfm/upload.cfm" ;
//config.ImageUploadURL = config.BasePath + "filemanager/upload/php/upload.php" ;
//config.ImageUploadURL = config.BasePath + "filemanager/upload/jsp/upload.jsp" ;
改为
//##
//## Image Browsing
//##
config.ImageBrowser = true ;
// Custom Page URL config.
ImageBrowserURL = "filemanager/browse/sample_html/browse.html" ;
config.ImageBrowserURL = config.BasePath + "filemanager/browse/sample_php/browse.php" ;
//##
//## Image Upload
//##
config.ImageUpload = true ;
// Page that effectivelly upload the image.
config.ImageUploadURL = config.BasePath + "filemanager/upload/php/upload.php" ;
最后再修改2个文件:
/FCKeditor/filemanager/upload/php/upload.php
第22行
$UPLOAD_BASE_URL = '/userimages/';
/FCKeditor/filemanager/browse/sample_php/browse.php
第20行
$IMAGES_BASE_URL = '/FCKeditor/userimages/';
这两处定义了图片上传到哪个目录,可以自行定义,不过一定要确保该目录存在,不然上传图片时会报错。
然后我们把FCKeditor目录下的用不到的.asp、.jsp、. cfm文件和_test、_ aspnet、