FckEditor配置手册中文教程详细说明3

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

在线编辑器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里面编辑的内容，这里可以将其保存到数据库，代码省略。 }

　

　

　　三、配置在线编辑器

　　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”（连接器）的技术来实现对文件的浏览以及上传。下图显示了文件浏览的工作流程图。

　　从图中可以看出，当客户端向服务器发出一个文件操作请求后，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目录下的_docs和_samples两个目录删除以节省空间。本文是笔者以前写过的一篇名为《在线编辑器FCKeditor在PHP中的使用方法》（1.6版）文章的升级版本，文章如有不妥之处，还请大家指正。

　　另，遇到的问题

　　1、图片文件上传路径问题

　　安装我文章里面的设置，上传路径设置为UserFiles/，但是上传图片文件时，FCKeditor都自动把文件上传到UserFiles/image目录下面，自做主张的建立了一个image目录，很是不爽。原因不明。

 

配置FCKeditor（FCKeditor for java）

1.下载
FCKeditor.java 2.3 (FCKeditot for java)
FCKeditor 2.2 (FCKeditor基本文件)

　　2.建立项目:tomcat/webapps/TestFCKeditor.

　　3.将FCKeditor2.2解压缩,将整个目录FCKeditor复制到项目的根目录下，
目录结构为：tomcat/webapps/TestFCKeditor/FCKeditor
然后将FCKeditor-2.3.zip（java）压缩包中/web/WEB-INF/lib/目录下的两个jar文件拷到项目的/WEB-INF/lib/目录下。把其中的src目录下的FCKeditor.tld文件copy到TestFCKedit/FCKeitor/WEB-INF/下

　　4.将FCKeditor-2.3.zip压缩包中/web/WEB-INF/目录下的web.xml文件合并到项目的/WEB-INF/目录下的web.xml文件中。

　　5. 修改合并后的web.xml文件，将名为SimpleUploader的Servlet的enabled参数值改为true，
以允许上传功能，Connector Servlet的baseDir参数值用于设置上传文件存放的位置。
添加标签定义:

<taglib> <taglib-uri>/TestFCKeditor</taglib-uri> <taglib-location>/WEB-INF/FCKeditor.tld</taglib-location> </taglib>

　　6. 上面文件中两个servlet的映射分别为：/editor/filemanager/browser/default/connectors/jsp/connector
和/editor/filemanager/upload/simpleuploader，需要在两个映射前面加上/FCKeditor，
即改为/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector和
/FCKeditor/editor/filemanager/upload/simpleuploader。

　　7.进入skin文件夹，如果你想使用fckeditor默认的这种奶黄色，
那就把除了default文件夹外的另两个文件夹直接删除.

　　8.删除/FCKeditor/目录下除fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四个文件以外的所有文件
删除目录/editor/_source,
删除/editor/filemanager/browser/default/connectors/下的所有文件
删除/editor/filemanager/upload/下的所有文件
删除/editor/lang/下的除了fcklanguagemanager.js, en.js, zh.js, zh-cn.js四个文件的所有文件

　　9.打开/FCKeditor/fckconfig.js
修改 FCKConfig.DefaultLanguage = 'zh-cn' ;
把FCKConfig.LinkBrowserURL等的值替换成以下内容：

FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/jsp/connector" ; FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector" ; FCKConfig.FlashBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector" ; FCKConfig.LinkUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=File' ; FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ; FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;

　　10.其它
fckconfig.js总配置文件，可用记录本打开，修改后将文件存为utf-8 编码格式。找到：

　　FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ; 即在编辑器域内可以使用Tab键。

　　如果你的编辑器还用在网站前台的话，比如说用于留言本或是日记回复时，那就不得不考虑安全了，
      在前台千万不要使用Default的toolbar，要么自定义一下功能，要么就用系统已经定义好的Basic，
     也就是基本的toolbar，找到：
     FCKConfig.ToolbarSets["Basic"] = [
     ['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink','-','Style','FontSize','TextColor','BGColor','-',
     'Smiley','SpecialChar','Replace','Preview'] ] ;
     这是改过的Basic，把图像功能去掉，把添加链接功能去掉，因为图像和链接和flash和图像按钮添加功能都能让前台
     页直接访问和上传文件， fckeditor还支持编辑域内的鼠标右键功能。

     FCKConfig.ContextMenu = ['Generic',/*'Link',*/'Anchor',/*'Image',*/'Flash','Select','Textarea','Checkbox','Radio','TextField','HiddenField',
     /*'ImageButton',*/'Button','BulletedList','NumberedList','TableCell','Table','Form'] ;

     这也是改过的把鼠标右键的“链接、图像，FLASH，图像按钮”功能都去掉。

　　找到： FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
      加上几种我们常用的字体
      FCKConfig.FontNames
      = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

     7、添加页面

<%@ page language="java" import="com.fredck.FCKeditor.*" %> <%@ taglib uri="/WEB-INF/tlds/FCKeditor.tld" prefix="FCK" %> <script type="text/javascript" src="FCKeditor/fckeditor.js"></script> <form action="show.jsp" method="post" target="_blank"> <table border="0" width="700"><tr><td> <textarea id="content" name="content" style="WIDTH: 100%; HEIGHT: 400px">input</textarea> <script type="text/javascript"> var oFCKeditor = new FCKeditor('content') ; oFCKeditor.BasePath = "FCKeditor/" ; oFCKeditor.Height = 400; oFCKeditor.ToolbarSet = "Default" ; oFCKeditor.ReplaceTextarea(); </script> <input type="submit" value="Submit"> </td></tr></table> </form>

     编辑web.xml 文集 添加 如下片断

<servlet>    <servlet-name>SimpleUploader</servlet-name>    <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>    <init-param>     <param-name>baseDir</param-name>     <param-value>/UserFiles/</param-value>    </init-param>    <init-param>     <param-name>debug</param-name>     <param-value>true</param-value>    </init-param>    <init-param>     <param-name>enabled</param-name>     <param-value>false</param-value>    </init-param>    <init-param>     <param-name>AllowedExtensionsFile</param-name>     <param-value></param-value>    </init-param>    <init-param>     <param-name>DeniedExtensionsFile</param-name>     <param-value>php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi</param-value>    </init-param>    <init-param>     <param-name>AllowedExtensionsImage</param-name>     <param-value>jpg|gif|jpeg|png|bmp</param-value>    </init-param>    <init-param>     <param-name>DeniedExtensionsImage</param-name>     <param-value></param-value>    </init-param>    <init-param>     <param-name>AllowedExtensionsFlash</param-name>     <param-value>swf|fla</param-value>    </init-param>    <init-param>     <param-name>DeniedExtensionsFlash</param-name>     <param-value></param-value>    </init-param>    <load-on-startup>1</load-on-startup> </servlet>    <servlet-mapping>      <servlet-name>Connector</servlet-name>      <url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>    </servlet-mapping>       <servlet-mapping>      <servlet-name>SimpleUploader</servlet-name>      <url-pattern>/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern>    </servlet-mapping>   <taglib> <taglib-uri>/WEB-INF/FCKeditor.tld</taglib-uri> <taglib-location>/WEB-INF/tlds/FCKeditor.tld</taglib-location> </taglib>

　　//引入在线编辑器

　　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() ;