在已有的WEB应用中配置与使用 FCKeditor 2.5.1 网页编辑器

对于网页编辑器来说, 我觉得FCKeditor最好用了, 因为它的配置均只要在两个配置文件配置即可, 对于不同的场合, 还可以根据需要定删除增加编辑器的功能, 就像我现在正在编辑这个BLOG的编辑器一样.

我一直都是在用FCKeditor, 写这个BLOG, 一是作为存档, 二是希望在配置与使用过程中碰到和我一样的朋友们能够在我得到帮助.

相关环境: Tomcat 5.5.26, Java 5, Struts 2.0.11, Spring 2.0, Hibernate 3.2, SiteMesh

其实如果只是用FCKeditor的JAVA版, 只要Tomcat, Java就可以了.

一. 下载FCKeditor 2.5.1

其实现在已经有2.6了, 只不过现在它还是Beta版, 而2.5已经是Stable了, 所以我也是更新到2.5.1了.

下载地址: http://www.fckeditor.net/download

下载FCKeditor: FCKeditor 2.5.1 (Latest Stable) 和 FCKeditor.Java

如果不用到文件管理器的话, 第二个FCKeditor.Java根本不用下载.

二. 复制 FCKeditor 2.5.1 相关文件到WEB应用中

解压刚下载的文件包, 在WEB应用ymcn下建文件夹: fck, 以存放FCKeditor 网页编辑器, 这个文件夹名可以根据你的爱好来定, 但是在后面的配置文件中就要做相应的修改了, 我一般喜欢短而意思明白的文件夹名, 这样我的WEB从根到fck就是: /ymcn/fck

复制: 文件夹editor, 文件: fckeditor.js, fckconfig.js, fckstyles.xml, fcktemplates.xml 到fck下.

如果你想使用文件管理器的话, 还要复制 FCKeditor-2.3.jar 到你我WEB应用的lib目录下.

为了节省空间, 还可以删除: 文件夹editor下的 _source 文件夹.

如果不用文件管理器的话, 还可以删除 editor下的filemanager下的 connectors 文件夹, 因为我们的用Servlet来连接和上传文件的.

还可以继续删除多余的语言文件: 在editor 下的 lang 文件来. 一般情况下, 我们的WEB应用都是国际化, 支持多语言的, 这里的文件正好符合了我们的要求.

三. 修改 FCKeditor 配置文件

主要有三个文件需要修改: fckconfig.js, fckeditor.js, web.xml

如果你不想用文件管理器的话, web.xml也不需修改了.

1. 修改 fckconfig.js

FCKConfig.AutoDetectLanguage = true;
FCKConfig.DefaultLanguage   = 'zh-cn';

第一句是: 自动检测语言, 因为我们的应用都是国际化多语言的, 所以当然要让它自动检测了.

第二句是: 默认语言, 我们都是中国人, 当然用 zh-cn, 这里的语言是根据 lang 文件夹下的 *.js 来设置的.

FCKConfig.FillEmptyBlocks = false ;

就是下面要说明的FCKConfig.EnterMode = 'br'; // p | div | br增加<p>, 和<div>时, 是增加<p></p> 还是<p>&nbsp;</p>, 是<div></div> 还是<div>&nbsp;</div>, 如果下面的设置是 br, 那这个设置是没有意义的, 我就用的 br , 所以这个是true, false是一样的

FCKConfig.ToolbarStartExpanded = true ;
FCKConfig.ToolbarCanCollapse = false ;

第一句是: 工具条是否一进入就打开了?

第二句是: 工具条能否收缩? 对于只有一行的工具条来说, 就不要了, 就像百度的这个, 就没有收缩的, 但当有多行时, 设置能收缩也是不错的.

最吸引大家使用 FCKeditor 也许就是下面的工具条的配置了:

FCKConfig.ToolbarSets["www"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink',]
];

FCKConfig.ToolbarSets["mini"] = [
['Source']
];

FCKConfig.ToolbarSets["none"] = [
];

上面的三个工具条都是我根据需要增加的, 其中, FCKeditor 自带的 Default 是全部的工具条, 你可以根据自己的需要来自定义工具条, 不同的场合使用不同的工具条.

FCKConfig.EnterMode = 'br'; // p | div | br

就是当按 Enter 时, 是增加<p></p>, 还是<div></div>, 还是<br/>

我比较喜欢 <br/>, 所以设为 br 了, 我也试了下 p ,有点问题, 就是我按 Ctrl + V 粘帖时, 它就是把它增加到上一行.

如果要用文件管理器的话，继续下面的步骤，否则跳过。

增加两个变量，主要是文便后面的修改：

var connectURL = "/ymcn/fck-connect";
var uploadURL = "/ymcn/fck-upload";

说明：/fck-connect 和 /fck-upload 是后面的在 web.xml 中配置的两个Servlet 的映射，当然你完全可以根据你的爱好来设置。

FCKConfig.LinkBrowser = true ;
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=' + connectURL;

FCKConfig.ImageBrowser = true ;
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=' + connectURL;

FCKConfig.FlashBrowser = true ;
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Flash&Connector=' + connectURL;

FCKConfig.LinkUpload = true ;
FCKConfig.LinkUploadURL = uploadURL;

FCKConfig.ImageUpload = true ;
FCKConfig.ImageUploadURL = uploadURL + '?Type=Image' ;

FCKConfig.FlashUpload = true ;
FCKConfig.FlashUploadURL = uploadURL + '?Type=Flash' ;

好了，fckconfig.js 已经配置完成了。

2. 修改 fckeditor.js

就一句话：FCKeditor.BasePath = '/ymcn/fck/' ;

这当然是根据你的实际情况来配置了，

3. 修改 web.xml

如果不需要用文件管理器，这步也不需要了

<!-- FCKeditor -->
<servlet>
   <servlet-name>fck-connect</servlet-name>
   <servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
   <init-param>
    <param-name>baseDir</param-name>
    <param-value>/upload/fck/</param-value>
   </init-param>
   <init-param>
    <param-name>debug</param-name>
    <param-value>false</param-value>
   </init-param>
   <load-on-startup>5</load-on-startup>
</servlet>
<servlet>
   <servlet-name>fck-upload</servlet-name>
   <servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
   <init-param>
    <param-name>baseDir</param-name>
    <param-value>/upload/fck/</param-value>
   </init-param>
   <init-param>
    <param-name>debug</param-name>
    <param-value>false</param-value>
   </init-param>
   <init-param>
    <param-name>enabled</param-name>
    <param-value>true</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>5</load-on-startup>
</servlet>

<!-- FCKeditor -->
<servlet-mapping>
     <servlet-name>fck-connect</servlet-name>
     <url-pattern>/fck-connect</url-pattern>
    </servlet-mapping>
    <servlet-mapping>
     <servlet-name>fck-upload</servlet-name>
     <url-pattern>/fck-upload</url-pattern>
    </servlet-mapping>

 

上面的两个加红的就是和上面的两个新增加的变量值对应了.......

四. 使用 FCKeditor

剩下的就是使用了：

文件: testFCK.jsp

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="fck"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>郁闷中国[www.ymcn.org] - 三人行 - 测试FCKeditor</title>
<link rel="stylesheet" type="text/css" href="/ymcn/style/10/10.css">
</head>

<body>
<table width="100%" border="0" cellpadding="3" cellspacing="0" class="tab_Bor1234">
<tr>
<td height="40" align="center" bgcolor="#C6C6C6" class="title tab_Bor3">测试FCKeditor</td>
</tr>
<tr>
<td height="30" bgcolor="#EAEAEA" class="daohang">文本编辑框： </td>
</tr>
<tr>
<td class="tab_Bor3">
<s:form method="post" action="proSaveSysMsg" namespace="/">
<fck:editor id="content" basePath="/ymcn/fck/" toolbarSet="mini" width="100%" height="400">请在此输入文本内容...</fck:editor>
</s:form>
</td>
</tr>
</table>

</body>
</html>

 

上面加红的：id 就是你的input的name和id

toolbarSet 就是你要用的工具集了。