FCKeditor是sourceforge.net上面的一个开源项目,主要是实现在线网页编辑器的功能,可以让web程序拥有如MS Word这样强大的编辑功能。官方网站为http://www.fckeditor.net ,在服务器端支持ASP.Net、ASP、ClodFusion、PHP、Java等语言,并且支持IE 5+、Mozilla 、Netscape等主流浏览器。
首先在官方网站下载fckeditor,注意有两个包,一个是主文件,一个是jsp整合包的。
1、解压FCKeditor_2.3.2.zip,(FCKeditor主文件),将FCKeditor目录复制到网站根目录下
(这里要注意,解压开的是fckeditor要改成FCKeditor (用标签调用时默认是大写的,用js时却是小写的,这个不太明白)
2、解压FCKeditor-2.3.zip,(jsp,FCKeditor整合包),作用:This is the JSP Integration Pack for using FCKeditor inside a java server page without the complexity of using a Java scriptlets or the javascript api.
3、将FCKeditor-2.3/web/WEB-INF/web.xml中的两个servlet,servlet-mapping定义复制到自已项目的web.xml文件中
修改
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
<url-pattern>/editor/filemanager/upload/simpleuploader</url-pattern>
</servlet-mapping>
为
<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>
4、将FCKeditor-2.3/web/WEB-INF/lib目录下2个JAR包:FCKeditor-2.3.jar,commons-fileupload.jar复制到自已项目的lib文件夹中(注意如果用SSH 用了SPRING的上传项目里有commons-fileupload.jar)就不用复制了.
(这里要注意,有的网上的帖子里写的是把jsp整合包里的源代码src\com\fredck\FCKeditor\*整合到了项目里,那么这个时候就不需要FCKeditor-2.3.jar了,可以看看这是一个东西。)
5、在需使用FCKeditor的jsp界面中加入:
// 文件开头处加入
<%@ taglib uri="http://fckeditor.net/tags-fckeditor" prefix="FCK" %>
这种用法没注意过 我用的是<%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="FCK" %>
/WEB-INF/FCKeditor.tld这个文件当然是要有的。
//要使用的地方加入
<FCK:editor id="content" width="100%" height="500 basePath="/FCKeditor/"
imageBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
这里是要编辑的内容,可以直接接受显示输出的参数(如 <%=content %>)。
</FCK:editor>
//////////////////////////////////////////
使用时有可能出现FCKeditor不能浏览服务器问题,报错信息为: The Server didn 't send back a proper XML response。
原因是服务器没有xml解析器,
解决方法:到 http://apache.justdn.org/xml/xalan-j/binaries/
下载 xalan-j_2_7_0-bin-2jars.zip
解压后把 xalan.jar,serializer.jar拷贝到应用的lib目录下。就OK了。
我用的是tomcat 6.0 没有报这个错误,可能是里面有自带的
//////////////////////////////
启动服务器测试。。。。成功后,来给FCKeditor瘦瘦身.
1、将FCKeditor目录下及子目录下所有以”_”下划线开头的文件夹删除
2.FCKeditor根目录下只保留fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml其余全部删除
3.将editor/filemanager/upload目录下文件及文件夹清空.
4.还可以将editor/skins目录下的皮肤文件删除,只留下default一套皮肤(如果你不需要换皮肤的话)
5.还可以将editor/lang目录下文件删除,只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js文件(英文,简体中文,繁体中文一般应该够用了:) )
完成,现在看是不是清爽了很多?
其它问题:
在struts+spring+hibernate中使用,上传图像功能中可能会出现报:
The output format must have a ‘{http://xml.apache.org/xalan}content-handler’ property!
错的情况,将WEB-INF/lib目录下xalan*.jar删除试试
安全问题:
假如在前台让普通用户也能使用FCKEditor,要注意相关安全问题,在前台使用时,不要使用默认的ToolBar,
要将添加图像,flash,图像域按钮去掉
在fckconfig.js中大约78行配置 那些数组中的值就像当于界面上的一个功能,你可以强行把每组值试出来代表什么。:P
到此安装FCKeditor就完成了,相关详细配置你可以看FCKeditor-2.3.zip,(jsp,FCKeditor整合包)文件夹中web/_samples目录下的例子。
///////////////////////////////////////
三种方法调用FCKeditor
<%--
三种方法调用FCKeditor
1.FCKeditor自定义标签 (必须加头文件 <%@ taglib uri="/TestFCKeditor" prefix="FCK" %> )
2.script脚本语言调用 (必须引用 脚本文件 <script type="text/javascript" src="/TestFCKeditor/FCKeditor/fckeditor.js"></script> )
3.FCKeditor API 调用 (必须加头文件 <%@ page language="java" import="com.fredck.FCKeditor.*" %> )
--%>
这个现在不太清楚也没研究,平时就用过标签的就是第一种。
11.FCKeditor编辑器文件上传配置
FCKeditor编辑器的配置文件是fckconfig.js,其中有对编辑器各种默认属性的设置。以下是fckeditor与java集成使用时上传文件的设置(需要注意的是编辑器不会自动创建文件上传的文件夹,需要在项目的根目录中手动添加),将fckeditor.js文件中以下几个属性原来的值修改为如下设置:
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.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image' ;FCKConfig.FlashUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Flash' ;至此,即可使用FCKeditor的文件上传功能。
//////////////////////
五、配置文件fckconfig.js
1、DefaultLanguage:缺省语言,可更改为“zh-cn”
2、自定义工具栏:可修改或增加ToolbarSets,例如:
FCKConfig.ToolbarSets["Demo"] = [
['Bold','Italic','-','OrderedList','UnorderedList','-','Link','Unlink','-','TextColor','BGColor','-','Style','-','Image','Flash','Table']
] ;
3、EnterMode和ShiftEnterMode:“回车”和“Shift+回车”的换行行为,注释提示了可选模式
4、EditorAreaCss:编辑区样式文件
5、其他参数(转):
AutoDetectLanguage=true/false 自动检测语言
BaseHref="" 相对链接的基地址
ContentLangDirection="ltr/rtl" 默认文字方向
ContextMenu=字符串数组,右键菜单的内容
CustomConfigurationsPath="" 自定义配置文件路径和名称
Debug=true/false 是否开启调试功能,这样,当调用FCKDebug.Output()时,会在调试窗中输出内容
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标记
六、自定义样式
工具栏的Style选项,是由fckconfig.js指定的配置文件来产生的:
FCKConfig.StylesXmlPath = FCKConfig.EditorPath + 'fckstyles.xml' ;
可修改fckstyles.xml来自定义样式。