《FCKeditor使用方法详解.doc》由会员分享，可在线阅读，更多相关《FCKeditor使用方法详解.doc（11页珍藏版）》请在金锄头文库上搜索。
1、FCKeditor使用方法技术详解作者：深蓝色QQ：76863715本文PHPChina论坛首发本文特为PHP5和MySQL5 Web开发技术详解一书编写1、 概述FCKeditor是目前最优秀的可见即可得网页编辑器之一，它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行，互联网上很容易找到相关技术文档，国内许多WEB项目和大型网站均采用了FCKeditor（如百度，阿里巴巴）。本文将通过与PHP相结合，从基本安装到高级的配置循序渐进介绍给广大PHPer。FCKeditor官方网站：http:/ Wiki：http:/ 下载FCKedit
2、or登录FCKeditor官方站（http:/），点击网站右上角“Download”链接。笔者编写本文时，FCKeditor当前最新的稳定版本是2.4.3，因此我们下载此版本的zip压缩格式文档。如图1所示：图1：下载FCKeditor 2.4.3（最新稳定版）注意：当点击“FCKeditor_2.4.3.zip”链接后，将跳转到网站上自动下载。如果您当前使用Linux或Unix系统，可以点击“FCKeditor_2.4.3.tar.gz”链接下载.tar.gz格式的压缩包。3、 安装FCKeditor解压“FCKeditor_2.4.3.zip”文档到您的网站目录下，我们先假定您存放FCKe
3、ditor和调用脚本存于同一个目录下。目录结构如下图所示：图2：网站目录结构图fckeditor目录包含FCKeditor2.4.3程序文件。check.php用于处理表单数据。add_article.php和add_article_js.html分别是PHP调用FCKeditor和JavaScript调用FCKeditor实例脚本文件。3.1、用PHP调用FCKeditor调用FCKeditor必须先载入FCKeditor类文件。具体代码如下。接下来，我们需要创建FCKeditor实例、指定FCKeditor存放路径和创建（显示）编辑器等。具体代码如下所示（代码一般放在表单内）。BasePa
4、th = ./fckeditor/; / 设置FCKeditor目录地址$FCKeditor-Width=100%; /设置显示宽度$FCKeditor-Height=300px; /设置显示高度的高度$oFCKeditor-Create() ; / 创建编辑器?下面是笔者创建好的实例代码，您可将代码保存为add_article.php。用PHP调用FCKeditorBasePath = ./fckeditor/; / 设置FCKeditor目录地址$oFCKeditor-Create() ; / 创建编辑器?通过浏览里打开http:/you-address/add_article.php 查
5、看FCKeditor安装效果。如图3所示。图3：FCKeditor安装成功注意：如果您想将FCKeditor创建为HTML结果代码，以便于在模板引擎里面调用（如Smarty）可使用如下代码。$output = $oFCKeditor-CreateHtml() ;现在，您可通过POST方式获得编辑器的变量值。本例将表单的action设置为check.php，您可在check.php里使用代码$fckeditorValue = $_POSTFCKeditor1;获得编辑器的变量值了。FCKeditor安装成功了。但是，我们还可以通过更多设置来使FCKeditor更加灵活人性化。具体方法文本后面介绍
6、。3.2、用JavaScript调用FCKeditor调用FCKeditor必须先载入FCKeditor类文件，但与PHP调用方法不同，应用下面的代码。 载入FCKeditor类成功后，有三种方法创建（显示）编辑器。一：内嵌方法（推荐）在您想要显示FCKeditor的地方创建如下代码（通常在表单里）： var oFCKeditor = new FCKeditor(FCKeditor1); oFCKeditor.BasePath = ./fckeditor /; oFCKeditor.Create();下面是笔者创建好的实例代码，您可将代码保存为add_article_js.html。 用Jav
7、aScript调用FCKeditor var oFCKeditor = new FCKeditor(FCKeditor1); oFCKeditor.BasePath = ./fckeditor/; oFCKeditor.Create();通过浏览里打开http:/you-address/add_article_js.html 查看FCKeditor安装效果。效果和图3完全一样。同样，如果您可以使用和前面一样的方法取得编辑器的POST变量值。$fckeditorValue = $_POSTFCKeditor1;二：文本区域（TEXTAREA）方法同内嵌方法一样，也必须先载入fckeditor类。
8、但创建（显示）编辑器同内嵌方法不同，我们需要为window.onload定义一个函数。这样，函数便可以在页面加载时执行了。函数的定义代码如下所示。 window.onload = function() var oFCKeditor = new FCKeditor( MyTextarea ) ; oFCKeditor.BasePath = ./FCKeditor/ ; oFCKeditor.ReplaceTextarea() ;接着，您就可以在页面中（通常在表单里）定义id为MyTextarea的文本区域（TEXTAREA）。代码如下所示：下面是笔者创建好的实例代码，显示效果当然也是一样的。笔者
9、这里就不哆嗦了。 window.onload = function() var oFCKeditor = new FCKeditor( MyTextarea ) ; oFCKeditor.BasePath = ./fckeditor/ ; oFCKeditor.ReplaceTextarea() ; 用JavaScript调用FCKeditor三：适合于Ajax的调用方法同理，您同样需要加载类文件。然后使用下面的代码对div元素创建（显示）编辑器。var div = document.getElementById(myFCKeditor); /使用getElementById方法取得myFCKeditor ID元素var fck = new FCKeditor(myFCKeditor); /创建fckeditor实例div.innerHTML = fck.CreateHtml();/使用innerHTML方法，在myFCKeditor div元素里创建编辑器和使用PHP调用fckeditor实例一样，用javascript方法调用fckeditor实例也可以设置编辑器宽度和高度等。oFCKe
