1.下载
fckeditor-java-2.4.1-bin.zip
http://sourceforge.net/project/showfiles.php?group_id=75348&package_id=129511
FCKeditor_2.6.4.zip(基础包)
http://www.fckeditor.net/download
2.项目部署
将FCKeditor_2.6.4.zip解压缩,将整个目录FCKeditor复制到项目的根目录下,
目录结构为:和WEB-INF平级
然后将fckeditor-java-2.4.1-bin\fckeditor-java-2.4.1\lib目录下的
slf4j-api-1.5.2.jar、commons-io-1.3.2.jar、commons-fileupload-1.2.1.jar
三个个jar文件拷到项目的\WEB-INF\lib\目录下。
fckeditor-java-2.4.1-bin\fckeditor-java-2.4.1目录下fckeditor-java-core-2.4.1.jar文件也可拷贝到\WEB-INF\lib\目录下。
3.整合web.xml
将以下代码放入web.xml中
<servlet> <servlet-name>Connector</servlet-name> <servlet-class> net.fckeditor.connector.ConnectorServlet </servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Connector</servlet-name> <!-- Do not wrap this line otherwise Glassfish will fail to load this file --> <url-pattern> /fckeditor/editor/filemanager/connectors/* </url-pattern> </servlet-mapping>
4.精简FCKeditor
1>临时文件及文件夹删除:从根目录下开始删除一切以“_”开头的文件及文件夹,因为他们为临时文件和文件夹。删除这类临时文件及文件夹之后,我们还要删除一些根目录下的多余文件,根目录下我们只保留fckconfig.js(配置文件)、fckeditor.js(js方式调用文件)、fckstyles.xml(样式)、fcktemplates.xml(模板)文件和editor文件夹。
2>editor\lang目录:存放的是多语言配置文件,因为我们只可能用到en和zh-cn(简体中文)所以,根据我的选择,我删掉其他的语言配置文件。
3>editor\skins界面目录:默认带有三个界面(default:默认界面,加载速度相对较快;office2003:相对pp的界面,不过速度确实要慢些;silver:银白色界面,加载速度也相对较快),可以自行决定是否删除其中一两个。
4>editor\filemanager\browser\default\connectors目录:存放编辑器所支持的Web动态语言,我们以php为例所以保留php目录,test.html文件可以帮助你查看某语言下的上传设置等(具体上传设置我将在后面的配置作较为详细讲解),可以自行决定是否删除。
5>editor\filemanager\upload目录:同理。
5.FCKeditor配置
配置选项:
AutoDetectLanguage=true/false 自动检测语言
BaseHref="" _fcksavedurl="""" 相对链接的基地址
ContentLangDirection="ltr/rtl" 默认文字方向
ContextMenu=字符串数组,右键菜单的内容
CustomConfigurationsPath="" 自定义配置文件路径和名称 Debug=true/false
是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容
DefaultLanguage="" 缺省语言 EditorAreaCss=""
编辑区的样式表文件 EnableSourceXHTML=true/false
为TRUE时,当由可视化界面切换到代码页时,把HTML处理成XHTML EnableXHTML=true/false
是否允许使用XHTML取代HTML FillEmptyBlocks=true/false
使用这个功能,可以将空的块级元素用空格来替代 FontColors=""
设置显示颜色拾取器时文字颜色列表 FontFormats=""
设置显示在文字格式列表中的命名 FontNames=""
字体列表中的字体名 FontSizes=""
字体大小中的字号列表
ForcePasteAsPlainText=true/false 强制粘贴为纯文本 ForceSimpleAmpersand=true/false
是否不把&符号转换为XML实体
FormatIndentator="" 当在源码格式下缩进代码使用的字符
FormatOutput=true/false 当输出内容时是否自动格式化代码 FormatSource=true/false
在切换到代码视图时是否自动格式化代码
FullPage=true/false 是否允许编辑整个HTML文件,还是仅允许编辑BODY间的内容
GeckoUseSPAN=true/false 是否允许SPAN标记代替B,I,U标记
IeSpellDownloadUrl=""下载拼写检查器的网址
ImageBrowser=true/false 是否允许浏览服务器功能 ImageBrowserURL=""
浏览服务器时运行的URL
ImageBrowserWindowHeight="" 图像浏览器窗口高度
ImageBrowserWindowWidth="" 图像浏览器窗口宽度
LinkBrowser=true/false 是否允许在插入链接时浏览服务器 LinkBrowserURL=""
插入链接时浏览服务器的URL LinkBrowserWindowHeight=""
链接目标浏览器窗口高度 LinkBrowserWindowWidth=""
链接目标浏览器窗口宽度 Plugins=object
注册插件 PluginsPath=""
插件文件夹
ShowBorders=true/false 合并边框
SkinPath="" 皮肤文件夹位置 SmileyColumns=12
图符窗列数 SmileyImages=
字符数组 图符窗中图片文件名数组 SmileyPath=""
图符文件夹路径 SmileyWindowHeight
图符窗口高度 SmileyWindowWidth
图符窗口宽度
SpellChecker="ieSpell/Spellerpages" 设置拼写检查器 StartupFocus=true/false
开启时FOCUS到编辑器 StylesXmlPath=""
设置定义CSS样式列表的XML文件的位置
TabSpaces=4 TAB键产生的空格字符数
ToolBarCanCollapse=true/false 是否允许展开/折叠工具栏
ToolbarSets=object 允许使用TOOLBAR集合
ToolbarStartExpanded=true/false 开启是TOOLBAR是否展开
UseBROnCarriageReturn=true/false 当回车时是产生BR标记还是P或者DIV标记
6.创建在Velocity中使用FCKeditor的类
新建类如下所示:
/** * 包名:com.lyw.cms.base.utill<br> * 文件:FCKeditorWrapper.java<br> * 作者:zohan[[email protected]] * 时间:20097:42:27 PM<br> * * Current revision $Revision: 1.1 $<br> * Latest change by $Author: zohan $<br> * $Log: FCKeditorWrapper.java,v $ * Revision 1.1 2009/04/24 04:32:28 zohan * 文章开始 * <br> */ package com.lyw.cms.base.utill; import javax.servlet.http.HttpServletRequest; import net.fckeditor.FCKeditor; /** * @author Administrator * */ public class FCKeditorWrapper { private HttpServletRequest request; public FCKeditorWrapper(final HttpServletRequest request) { this.request = request; } /** * * @param instanceName 参数名称 * @param value * @return */ public String get(final String instanceName, final String value) { FCKeditor editor = new FCKeditor(request, instanceName); editor.setValue(value); return editor.createHtml(); } /** * * @param instanceName 参数名称 * @param width * @param height * @param toolbarSet * @param value * @return */ public String get(final String instanceName, final String width, final String height, final String toolbarSet, final String value) { FCKeditor editor = new FCKeditor(request, instanceName, width, height, toolbarSet, value, null); editor.setValue(value); return editor.createHtml(); } }
7.在Velocity中使用FCKeditor
将FCKeditorWrapper 放入Velocity能调用的地方并取名为editor,例如:
FCKeditorWrapper fck = new FCKeditorWrapper(request); request.setAttribute("editor", fck);
在Velocity中使用
<form method="post" action="save.action"> $editor.get("content", "请在这里填入内容"); <input type="submit" value="提交" /> </form>