首先在官方网站下载fckeditor,注意有两个包，一个是主文件，一个是jsp整合包的。
1、解压FCKeditor_2.2.zip,(FCKeditor主文件)，将FCKeditor目录复制到网站根目录下。
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目录下文件复制到自已项目的lib文件夹中
5、在需使用FCKeditor的jsp界面中加入：
// 文件开头处加入
| 代码如下 | 复制代码 |
| <%@ taglib uri=”http://fckeditor.net/tags-fckeditor” prefix=”FCK” %> //要使用的地方加入 <FCK:editor id=”content” 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”> this is default content :) </FCK:editor> |
|
调用FCKeditor
| 代码如下 | 复制代码 |
|
(1).FCKeditor自定义标签 (必须加头文件 <%@ taglib uri="/FCKeditor" prefix="FCK" %> ) 显示 <form action="show.jsp" method="post" target="_blank"> <FCK:editor id="content" basePath="/FCKeditor/" width="700" height="500" skinPath="/FCKeditor/editor/skins/silver/" toolbarSet = "Default" > input </FCK:editor> <input type="submit" value="Submit"> </form> (2).script脚本语言调用 (必须引用 脚本文件 <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> (3).FCKeditor API 调用 (必须加头文件 <%@ page language="java" import="com.fredck.FCKeditor.*" %> ) <form action="show.jsp" method="post" target="_blank"> <% FCKeditor oFCKeditor ; oFCKeditor = new FCKeditor( request, "content" ) ; oFCKeditor.setBasePath( "/FCKeditor/" ) ; oFCKeditor.setValue( "input" ); out.println( oFCKeditor.create() ) ; %> <br> <input type="submit" value="Submit"> </form> 8.输出： ok! |
|
另：FCKeditor for Java的上传是通过servlet进行的，不是Jsp，所以配置文件web.xml中的"editor/filemanager/browser/default/connectors/jsp/connector" jsp/connector 目录并不存在，只要配置好FCKeditor.java就行了
编辑器菜单工具配置
1、fckconfig.js总配置文件，可用记录本打开，修改后将文件存为utf-8 编码格式。找到：
FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ; 即在编辑器域内可以使用Tab键。
2、如果你的编辑器还用在网站前台的话，比如说用于留言本或是日记回复时，那就不得不考虑安全
了，在前台千万不要使用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', 'NumberedList','TableCell','Table','Form'] ; |
|
这也是改过的把鼠标右键的“链接、图像，FLASH，图像按钮”功能都去掉。
3、找到： 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' ; |
|
4、注意上传的文件名不能有中文，否则无法正常显示或链接下载
其它问题：
在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目录下的例子。