打造最大的网络营销知识与推广的信息化航母

进入论坛 | 会员注册 | 会员登陆 |
首页 >> php >> php进阶教程 >> PHP环境下配置在线编辑器FCKeditor正文

PHP环境下配置在线编辑器FCKeditor

来源:it我领先 发布时间:2010-04-03               浏览次数:30 进入论坛社区
在线编辑器FCKeditor 2.0PHP环境下试用小记

  一、简介
  2004年11月30日推出了FCKeditor 2.0 RC1版,据其官方网站称:这是FCKeditor 2.0版的第一个稳定版本。大家现在可以考虑正式使用它了。目前支持的后台语言有ASP、ASP.Net、PHP和ColdFusion。

  笔者在经过简单的试用发现,在线编辑器2.0版确实比1.6版有了许多的改进。首先是FCKeditor的文件结构更加清晰,可以更方便地将其部署在自己的系统中。另外2.0版终于支持了Firefox 1.0浏览器,这将为FCKeditor赢得更多的使用者。废话不多说,让我们赶快来学习如何安装、配置FCKeditor 2.0吧。

  二、安装与范例

  首先到http://sourceforge.net/projects/fckeditor/ 下载FCKeditor 2.0 RC1(554K),并将其解压缩到你的网站目录里面,并将文件夹名改为FCKeditor。举例来说,如果你的网站放在shaof这个目录下面,则在这个目录中建立3个子目录:


n FCKeditor:存放从网站上下载的FCKeditor在线编辑器
n upimages:用于存放上传的图片
n admin:里面存放测试页面


  网站的结构如下:

/FCKeditor //FCKeditor目录
/UserFiles //上传文件目录
/admin
test.php //提交数据页面
testsubmit.php //显示数据页面


  进入到FCKeditor目录下,打开_samples目录,里面含有各种编程语言调用FCKeditor的范例程序页面,其中php目录中包含着一些使用PHP来调用FCKeditor的范例,大家可以看一下,了解FCKeditord的调用方法,下面是我简写了一个test.php程序,放在网站根目录下的admin目录中:


if($_POST[双引号ADD双引号]){
$Content=$_POST[单引号EditorDefault单引号];
echo $Content;
//变量$Content就是我们在FCKeditord里面编辑的内容,这里可以将其保存到数据库,代码省略。
}

  //引入在线编辑器
  include(双引号../FCKeditor/fckeditor.php双引号) ;
  这里我们先看一下调用FCKeditor的函数,2.0版的调用方式与1.6版变化不大,如果你以前安装过FCKeditor 1.6,那么只需要修改很少的代码升级到2.0。
  FCKeditor( instanceName[, width, height, toolbarSet, value]

引用值含义  InstanceName实例化编辑器所需的唯一名称  Width编辑器的宽度,单位为象素或者百分比(可选择的,默认为:100%)  Height编辑器的高度,单位为象素或者百分比(可选择的,默认为:200)  ToolbarSet工具栏的名称(可选择的,默认为:Default)  Value编辑器的内容(HTML)初始值(可选择的)


  好啦,下面就让我们利用这个函数来定制FCKeditor吧。$oFCKeditor = new FCKeditor(单引号FCKeditor1单引号) ;
$oFCKeditor->BasePath = 单引号../FCKeditor/单引号 ;
$oFCKeditor->ToolbarSet = 单引号Default单引号 ;
$oFCKeditor->InstanceName = 单引号EditorDefault单引号 ;
$oFCKeditor->Width = 单引号100%单引号 ;
$oFCKeditor->Height = 单引号400单引号 ;
$oFCKeditor->Create() ;   三、配置在线编辑器  FCKeditor 2.0的配置文件为FCKeditorfckconfig.js,其中几个重要的配置项目如下:
  1、工具栏的设置
  默认情况下,FCKeditor会调用如下的工具栏按钮,大家可以根据自己的需要进行增减。需要注意的是,2.0版与1.6版的按钮并不完全相同,有些按钮以及删除或者改名了。
//##
//## Toolbar Buttons Sets
//##
FCKConfig.ToolbarSets[双引号Default双引号] = [
[单引号Source单引号,单引号-单引号,单引号Save单引号,单引号NewPage单引号,单引号Preview单引号],
[单引号Cut单引号,单引号Copy单引号,单引号Paste单引号,单引号PasteText单引号,单引号PasteWord单引号,单引号-单引号,单引号Print单引号],
[单引号Undo单引号,单引号Redo单引号,单引号-单引号,单引号Find单引号,单引号Replace单引号,单引号-单引号,单引号SelectAll单引号,单引号RemoveFormat单引号],
[单引号Bold单引号,单引号Italic单引号,单引号Underline单引号,单引号StrikeThrough单引号,单引号-单引号,单引号Subscript单引号,单引号Superscript单引号],
[单引号OrderedList单引号,单引号UnorderedList单引号,单引号-单引号,单引号Outdent单引号,单引号Indent单引号],
[单引号JustifyLeft单引号,单引号JustifyCenter单引号,单引号JustifyRight单引号,单引号JustifyFull单引号],
[单引号Link单引号,单引号Unlink单引号],
[单引号Image单引号,单引号Table单引号,单引号Rule单引号,单引号SpecialChar单引号,单引号Smiley单引号],
[单引号Style单引号,单引号FontFormat单引号,单引号FontName单引号,单引号FontSize单引号],
[单引号TextColor单引号,单引号BGColor单引号],
[单引号About单引号]
] ;
  2、简体中文设置  编辑edit/lang/fcklanguagemanager.js  将下面语句FCKLanguageManager.AvailableLanguages =
{
单引号ar单引号 : 单引号Arabic单引号,
单引号bs单引号 : 单引号Bosnian单引号,
单引号ca单引号 : 单引号Catalan单引号,
单引号en单引号 : 单引号English单引号,
单引号es单引号 : 单引号Spanish单引号,
单引号et单引号 : 单引号Estonian单引号,
单引号fi单引号 : 单引号Finnish单引号,
单引号fr单引号 : 单引号French单引号,
单引号gr单引号 : 单引号Greek单引号,
单引号he单引号 : 单引号Hebrew单引号,
单引号hr单引号 : 单引号Croatian单引号,
单引号it单引号 : 单引号Italian单引号,
单引号ko单引号 : 单引号Korean单引号,
单引号lt单引号 : 单引号Lithuanian单引号,
单引号no单引号 : 单引号Norwegian单引号,
单引号pl单引号 : 单引号Polish单引号,
单引号sr单引号 : 单引号Serbian (Cyrillic)单引号,
单引号sr-latn单引号 : 单引号Serbian (Latin)单引号,
单引号sv单引号 : 单引号Swedish单引号
}   添加一行 单引号zh-cn单引号 : 单引号Chinese单引号 从而变成FCKLanguageManager.AvailableLanguages =
{
单引号ar单引号 : 单引号Arabic单引号,
单引号bs单引号 : 单引号Bosnian单引号,
单引号ca单引号 : 单引号Catalan单引号,
单引号en单引号 : 单引号English单引号,
单引号es单引号 : 单引号Spanish单引号,
单引号et单引号 : 单引号Estonian单引号,
单引号fi单引号 : 单引号Finnish单引号,
单引号fr单引号 : 单引号French单引号,
单引号gr单引号 : 单引号Greek单引号,
单引号he单引号 : 单引号Hebrew单引号,
单引号hr单引号 : 单引号Croatian单引号,
单引号it单引号 : 单引号Italian单引号,
单引号ko单引号 : 单引号Korean单引号,
单引号lt单引号 : 单引号Lithuanian单引号,
单引号no单引号 : 单引号Norwegian单引号,
单引号pl单引号 : 单引号Polish单引号,
单引号sr单引号 : 单引号Serbian (Cyrillic)单引号,
单引号sr-latn单引号 : 单引号Serbian (Latin)单引号,
单引号sv单引号 : 单引号Swedish单引号,
单引号zh-cn单引号 : 单引号Chinese单引号
}   然后到这里http://www.shaof.com/download/zh-cn.js下载汉化好的zh-cn.js保存到editor/lang目录下即可。
  四、设置文件上传
  FCKeditor 2.0在线编辑器采用了一种名为“Connector”(连接器)的技术来实现对文件的浏览以及上传。下图显示了文件浏览的工作流程图。  从图中可以看出,当客户端向服务器发出一个文件操作请求后,Connector就会对此请求进行响应,在服务器的文件系统中进行执行操作,如:文件和文件夹的浏览以及创建操作。最后将结果以XML的格式回应给客户端。具体的技术细节大家可以阅读FCKeditor自带的说明指南。
  落实到应用,首先我们要选择一个后台语言用来实现这个功能,这里我们以PHP为例进行说明。
  1、 修改配置文件FCKeditorfckconfig.js中的两段内容
//Link Browsing
FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 双引号filemanager/browser/default/browser.html?Connector=connectors/php/connector.php双引号 ;
FCKConfig.LinkBrowserWindowWidth = screen.width * 0.7 ; // 70%
FCKConfig.LinkBrowserWindowHeight = screen.height * 0.7 ; // 70%
//Image Browsing
FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 双引号filemanager/browser/default/browser.html?Type=Image&Connector=connectors/php/connector.php双引号 ;
FCKConfig.ImageBrowserWindowWidth = screen.width * 0.7 ; // 70% ;
FCKConfig.ImageBrowserWindowHeight = screen.height * 0.7 ; // 70% ;   2、 修改配置文件FCKeditoreditorfilemanagerrowserdefaultconnectorsphpconnector.php
// Get the 双引号UserFiles双引号 path.
$GLOBALS[双引号UserFilesPath双引号] = 单引号/UserFiles/单引号 ;
  UserFiles为文件上传的路径,与本文开头所给的例子相对应,大家可以自行修改。
  好啦,只需要两步就完成了文件上传的配置工作,真是简单呀。以后我们通过FCKeditor上传的文件都会保存在网站的UserFiles目录下。  五、结束
  最后大家可以把FCKeditor目录下的_docs和_samples两个目录删除以节省空间。本文是笔者以前写过的一篇名为《在线编辑器FCKeditor在PHP中的使用方法》(1.6版)文章的升级版本,文章如有不妥之处,还请大家指正。  另,遇到的问题  1、图片文件上传路径问题  安装我文章里面的设置,上传路径设置为UserFiles/,但是上传图片文件时,FCKeditor都自动把文件上传到UserFiles/image目录下面,自做主张的建立了一个image目录,很是不爽。原因不明。
文章来源:http://it503.com/detail.PHP
添加收藏到:

关键词:PHP环境下配置在线编辑器FCKeditor,php
联系我们 | 关于我们 | rss订阅 | 网络社区 | 网站帮助 | 网站地图
Copyright(C) 2006-2007 it503 All Rights Reserved
本站如有转载或引用的文章涉及版权问题请速与我们联系 由于将本站资源用于商业用途而引起的纠纷,本站不负任何责任。
冀ICP备07500673号