1、安装原因:
以前一直使用的是FCKeditor_2.3.1版本,最近将PHP4、MYSQL4分别升级到PHP5、MYSQL5,问题出现:打开FCKeditor总是出现错误提示,于是干脆FCKeditor也升级了。
2、安装FCKeditor
下载(官方网站:http://www.fckeditor.net/)并解压“FCKeditor_2.6.3.zip”文档到您的网站目录下,我们先假定您存放FCKeditor和调用脚本存于同一个目录下。
fckeditor目录包含FCKeditor2.6.3程序文件。check.php用于处理表单数据。add_article.php和add_article_js.html分别是PHP调用FCKeditor和Javascrīpt调用FCKeditor实例脚本文件。
2.1、用PHP调用FCKeditor
调用FCKeditor必须先载入FCKeditor类文件。具体代码如下。
<?php
include("fckeditor/fckeditor.php") ; //用于载入FCKeditor类文件
?>
接下来,我们需要创建FCKeditor实例、指定FCKeditor存放路径和创建(显示)编辑器等。具体代码如下所示(代码一般放在表单内)。
<?php
$oFCKeditor = new FCKeditor('FCKeditor1') ; //创建FCKeditor实例
$oFCKeditor->BasePath = './fckeditor/'; //设置FCKeditor目录地址
$FCKeditor->Width='100%'; //设置显示宽度
$FCKeditor->Height='300px'; //设置显示高度的高度
$oFCKeditor->Create() ; //创建编辑器
?>
下面是笔者创建好的实例代码,您可将代码保存为add_article.php。
<?php
include("fckeditor/fckeditor.php") ; //用于载入FCKeditor类文件
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用PHP调用FCKeditor</title>
</head>
<body>
<form action="check.php" method="post" name="exapmle">
<?php
$oFCKeditor = new FCKeditor('FCKeditor1') ; //创建FCKeditor实例,可创建多个实例
$oFCKeditor->BasePath = './fckeditor/'; //设置FCKeditor目录地址
$oFCKeditor->Create() ; //创建编辑器
?>
<input name="ok" type="submit" value="提交" >
</form>
</body>
</html>
通过浏览里打开http://you-address/add_article.php查看FCKeditor安装效果。
注意:如果您想将FCKeditor创建为HTML结果代码,以便于在模板引擎里面调用(如Smarty)可使用如下代码。
$output = $oFCKeditor->CreateHtml() ;
现在,您可通过POST方式获得编辑器的变量值。本例将表单的action设置为check.php,您可在check.php里使用代码
$fckeditorValue = $_POST['FCKeditor1'];
获得编辑器的变量值了。
FCKeditor安装成功了。但是,我们还可以通过更多设置来使FCKeditor更加灵活人性化。具体方法文本后面介绍。
2.2、用Javascrīpt调用FCKeditor
调用FCKeditor必须先载入FCKeditor类文件,但与PHP调用方法不同,应用下面的代码。
<scrīpt type="text/javascrīpt" src="./fckeditor/fckeditor.js"></scrīpt> <!--载入fckeditor类-->
载入FCKeditor类成功后,有三种方法创建(显示)编辑器。
一:内嵌方法(推荐)
在您想要显示FCKeditor的地方创建如下代码(通常在表单里):
<scrīpt type="text/javascrīpt">
var ōFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "./fckeditor /";
oFCKeditor.Create();
</scrīpt>
下面是笔者创建好的实例代码,您可将代码保存为add_article_js.html。
<html>
<head>
<scrīpt type="text/javascrīpt" src="./fckeditor/fckeditor.js"></scrīpt> <!--载入fckeditor类-->
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用Javascrīpt调用FCKeditor</title>
</head>
<body>
<form action="check.php" method="post" name="example">
<scrīpt type="text/javascrīpt">
var ōFCKeditor = new FCKeditor('FCKeditor1');
oFCKeditor.BasePath = "./fckeditor/";
oFCKeditor.Create();
</scrīpt>
<input name="ok" type="submit" value="提交" >
</form>
</body>
</html>
通过浏览里打开http://you-address/add_article_js.html查看FCKeditor安装效果。效果和图3完全一样。
同样,如果您可以使用和前面一样的方法取得编辑器的POST变量值。
$fckeditorValue = $_POST['FCKeditor1'];
二:文本区域(TEXTAREA)方法
同内嵌方法一样,也必须先载入fckeditor类。但创建(显示)编辑器同内嵌方法不同,我们需要为window.onload定义一个函数。这样,函数便可以在页面加载时执行了。函数的定义代码如下所示。
<scrīpt type="text/javascrīpt">
window.onload = function()
{
var ōFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "./FCKeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</scrīpt>
接着,您就可以在页面中(通常在表单里)定义id为MyTextarea的文本区域(TEXTAREA)。代码如下所示:
<textarea id ="MyTextarea" name="MyTextarea" ></textarea>
下面是笔者创建好的实例代码,显示效果当然也是一样的。笔者这里就不哆嗦了。
<html>
<head>
<scrīpt type="text/javascrīpt" src="./fckeditor/fckeditor.js"></scrīpt> <!--载入fckeditor类-->
<scrīpt type="text/javascrīpt">
window.onload = function()
{
var ōFCKeditor = new FCKeditor( 'MyTextarea' ) ;
oFCKeditor.BasePath = "./fckeditor/" ;
oFCKeditor.ReplaceTextarea() ;
}
</scrīpt>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>用Javascrīpt调用FCKeditor</title>
</head>
<body>
<form action="check.php" method="post" name="example">
<textarea id ="MyTextarea" name="MyTextarea" ></textarea>
<input name="ok" type="submit" value="提交">
</form>
</body>
</html>