在线编辑fckeditor

在线编辑器FCKeditor 2.0
2006-12-22 21:22
一、简介 
    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个子目录: 
FCKeditor:存放从网站上下载的FCKeditor 
upimages:用于存放上传的图片 
admin:里面存放测试页面 
网站的结构如下: 
/shaof 
   /FCKeditor           //FCKeditor目录 
   /UserFiles            //上传文件目录 
   /admin 
test.php          //提交数据页面 
testsubmit.php     //显示数据页面 

    进入到FCKeditor目录下,打开_samples目录,里面含有各种编程语言调用FCKeditor的范例程序页面,其中php目录中包含着一些使用PHP来调用FCKeditor的范例,大家可以看一下,了解FCKeditord的调用方法,下面是我简写了一个test.php程序,放在网站根目录下的admin目录中: 
<?php 
if($_POST["ADD"]){ 
$Content=$_POST['EditorDefault']; 
echo $Content; 
//变量$Content就是我们在FCKeditord里面编辑的内容,这里可以将其保存到数据库,代码省略。 

?>; 
<html>; 
<head>; 
</head>; 
<body>; 
<form action="<?php  echo $_SERVER['PHP_SELF'];  ?>;"  method="post" language="javascript">; 
<?php 
//引入在线编辑器 
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() ; 
?>; 
<INPUT type="submit" name="ADD" value="提交">; 
</form>; 
</body>; 
</html>; 

三、配置 
FCKeditor 2.0的配置文件为FCKeditor\fckconfig.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”(连接器)的技术来实现对文件的浏览以及上传。下图显示了文件浏览的工作流程图。 
  
图1:Connector的工作流程图 
    从图中可以看出,当客户端向服务器发出一个文件操作请求后,Connector就会对此请求进行响应,在服务器的文件系统中进行执行操作,如:文件和文件夹的浏览以及创建操作。最后将结果以XML的格式回应给客户端。具体的技术细节大家可以阅读FCKeditor自带的说明指南。 
落实到应用,首先我们要选择一个后台语言用来实现这个功能,这里我们以PHP为例进行说明。 
1、修改配置文件FCKeditor\fckconfig.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、修改配置文件FCKeditor\editor\filemanager\browser\default\connectors\php\connector.php 
// Get the "UserFiles" path. 
$GLOBALS["UserFilesPath"] = '/UserFiles/' ; 
UserFiles为文件上传的路径,与本文开头所给的例子相对应,大家可以自行修改。 

    好啦,只需要两步就完成了文件上传的配置工作,真是简单呀。以后我们通过FCKeditor上传的文件都会保存在网站的UserFiles目录下。

你可能感兴趣的:(fckeditor)