资源预览内容
第1页 / 共11页
第2页 / 共11页
第3页 / 共11页
第4页 / 共11页
第5页 / 共11页
第6页 / 共11页
第7页 / 共11页
第8页 / 共11页
第9页 / 共11页
第10页 / 共11页
亲,该文档总共11页,到这儿已超出免费预览范围,如果喜欢就下载吧!
资源描述
FCKeditor使用方法技术详解作者:深蓝色QQ:76863715本文PHPChina论坛首发本文特为PHP5和MySQL5 Web开发技术详解一书编写1、 概述FCKeditor是目前最优秀的可见即可得网页编辑器之一,它采用JavaScript编写。具备功能强大、配置容易、跨浏览器、支持多种编程语言、开源等特点。它非常流行,互联网上很容易找到相关技术文档,国内许多WEB项目和大型网站均采用了FCKeditor(如百度,阿里巴巴)。本文将通过与PHP相结合,从基本安装到高级的配置循序渐进介绍给广大PHPer。FCKeditor官方网站:http:/www.fckeditor.net/FCKeditor Wiki:http:/wiki.fckeditor.net/2、 下载FCKeditor登录FCKeditor官方站(http:/www.fckeditor.net),点击网站右上角“Download”链接。笔者编写本文时,FCKeditor当前最新的稳定版本是2.4.3,因此我们下载此版本的zip压缩格式文档。如图1所示:图1:下载FCKeditor 2.4.3(最新稳定版)注意:当点击“FCKeditor_2.4.3.zip”链接后,将跳转到sourceforge.net网站上自动下载。如果您当前使用Linux或Unix系统,可以点击“FCKeditor_2.4.3.tar.gz”链接下载.tar.gz格式的压缩包。3、 安装FCKeditor解压“FCKeditor_2.4.3.zip”文档到您的网站目录下,我们先假定您存放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类文件。具体代码如下。接下来,我们需要创建FCKeditor实例、指定FCKeditor存放路径和创建(显示)编辑器等。具体代码如下所示(代码一般放在表单内)。BasePath = ./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 查看FCKeditor安装效果。如图3所示。图3:FCKeditor安装成功注意:如果您想将FCKeditor创建为HTML结果代码,以便于在模板引擎里面调用(如Smarty)可使用如下代码。$output = $oFCKeditor-CreateHtml() ;现在,您可通过POST方式获得编辑器的变量值。本例将表单的action设置为check.php,您可在check.php里使用代码$fckeditorValue = $_POSTFCKeditor1;获得编辑器的变量值了。FCKeditor安装成功了。但是,我们还可以通过更多设置来使FCKeditor更加灵活人性化。具体方法文本后面介绍。3.2、用JavaScript调用FCKeditor调用FCKeditor必须先载入FCKeditor类文件,但与PHP调用方法不同,应用下面的代码。 载入FCKeditor类成功后,有三种方法创建(显示)编辑器。一:内嵌方法(推荐)在您想要显示FCKeditor的地方创建如下代码(通常在表单里): var oFCKeditor = new FCKeditor(FCKeditor1); oFCKeditor.BasePath = ./fckeditor /; oFCKeditor.Create();下面是笔者创建好的实例代码,您可将代码保存为add_article_js.html。 用JavaScript调用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类。但创建(显示)编辑器同内嵌方法不同,我们需要为window.onload定义一个函数。这样,函数便可以在页面加载时执行了。函数的定义代码如下所示。 window.onload = function() var oFCKeditor = new FCKeditor( MyTextarea ) ; oFCKeditor.BasePath = ./FCKeditor/ ; oFCKeditor.ReplaceTextarea() ;接着,您就可以在页面中(通常在表单里)定义id为MyTextarea的文本区域(TEXTAREA)。代码如下所示:下面是笔者创建好的实例代码,显示效果当然也是一样的。笔者这里就不哆嗦了。 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
网站客服QQ:2055934822
金锄头文库版权所有
经营许可证:蜀ICP备13022795号 | 川公网安备 51140202000112号