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