jsp中配置 FCKeditor2.3

现在已经升级成CKeditor了 不过这方面的教程不是很多，也没啥时间去弄，所以找了以前的文章学习了一下，先记录如下。

1.下载
FCKeditor2.3 (FCKeditot for java) 包括了相应的jar文件 源码 以及editor及配置文件

2.建立项目:
建立项目FCKeditor_Demo

3.将FCKeditor2.3解压缩,将整个目录editor复制到项目的Webroot下
  将fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml 文件夹到项目中的 WebRoot 目录
  将"web\WEB-INF\lib 下的两个 jar 文件到项目的 WebRoot"WEB-INF"lib 目录
  将其中的 "src 下的 FCKeditor.tld 文件到项目的 WebRoot"WEB-INF 目录
 
4.项目的web.xml修改如下(可从web目录WEB-INF中获取web.xml)

引用

<!-- FCKeditor配置 -->
<display-name>FCKeditor</display-name>
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>
com.fredck.FCKeditor.connector.ConnectorServlet
</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>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>SimpleUploader</servlet-name>
<servlet-class>
com.fredck.FCKeditor.uploader.SimpleUploaderServlet
</servlet-class>
<init-param>
<param-name>baseDir</param-name>
<!-- 此为文件上传路径，需要在WebRoot 目录下新建 UserFiles 文件夹 -->
<!-- 根据文件的类型还需要新建相关的文件夹 Image、Flash -->
<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>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>1</load-on-startup>
</servlet>
<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>
<!-- FCKeditor配置 -->

(可选)删除无用的文件
删除无用文件
删除/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四个文件的所有文件

5.修改配置：
打开/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' ;

6.其它
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.<%--
三种方法调用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.*" %> )
--%>

//标签调用方式
<%--
<form action="show.jsp" method="post" target="_blank">
<FCK:editor id="content" basePath="/FCKeditor_Demo/"
width="700"
height="500"
skinPath="/FCKeditor_Demo/editor/skins/silver/"
toolbarSet = "Default"
>
input
</FCK:editor>
<input type="submit" value="Submit">
</form>
--%>

//JS调用方式
<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_Demo/" ;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default" ;
oFCKeditor.ReplaceTextarea();
</script>
<input type="submit" value="Submit">
</td></tr></table>
</form>

//FCKeditor API 调用
<%--
<form action="show.jsp" method="post" target="_blank">
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, "content" ) ;
oFCKeditor.setBasePath( "/FCKeditor_Demo/" ) ;
oFCKeditor.setValue( "input" );
out.println( oFCKeditor.create() ) ;
%>
<br>
<input type="submit" value="Submit">
</form>
--%>

只测试并成功了script方法~

8.上传文件的时候是调用FCKeditor.jar中的Servlet 可以将src中的源码拷贝到工程中，方便功能的修改

9.web.xml中

引用

init-param>
<param-name>baseDir</param-name>
<!-- 此为文件浏览路径 -->
<param-value>/UserFiles/</param-value>
</init-param>

/UserFiles/为上传文件的路径，需要在WebRoot下添加此目录，并添加Image和Flash目录分别存放图片和flash；不加的话可能会出现权限不够的警告窗口

10.以下是转载的一些备用信息，此次配置中没碰到问题，所以也没细看~留着以防不时之需吧

引用

配置选项:

AutoDetectLanguage=true/false 自动检测语言
BaseHref="" 相对链接的基地址
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标记
解决上传乱码:在SimpleUploaderServlet.java和ConnectorServlet.java两个文件里找到DiskFileUpload upload = new DiskFileUpload();
分别在其后加入 upload.setHeaderEncoding("utf-8");这样解决了文件上传的中文乱码问题.但是在控制台显示的中文内容还是乱码,但是没关系,我们没必要去看控制台下的中文

500错误：
          如果你上传时，出现500的错误，试试加上serializer.jar、xalan.jar、commons-fileupload.jar三个包。
二、根据自己的需求修改：
       点击上传图片，将图片信息上传到数据库。
      修改connector/ConnectorServlet.java dopost/doget方法。
   我用的是post方式提交的：

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        if (debug) System.out.println("--- BEGIN DOPOST ---");

        response.setContentType("text/html; charset=UTF-8");
        response.setHeader("Cache-Control","no-cache");
        PrintWriter out = response.getWriter();
       
        String commandStr=request.getParameter("Command");
        String typeStr=request.getParameter("Type");
        String currentFolderStr=request.getParameter("CurrentFolder");
       
        String currentPath=baseDir+typeStr+currentFolderStr;
//        System.out.println(currentPath);
        String currentDirPath=getServletContext().getRealPath(currentPath);
       
        if (debug) System.out.println(currentDirPath);
       
        String retVal="0";
        String newName="";
       
        if(!commandStr.equals("FileUpload"))
            retVal="203";
        else {
            DiskFileUpload upload = new DiskFileUpload();
            try {
                List items = upload.parseRequest(request);
               
                Map fields=new HashMap();
               
                Iterator iter = items.iterator();
                while (iter.hasNext()) {
                    FileItem item = (FileItem) iter.next();
                    if (item.isFormField())
                        fields.put(item.getFieldName(),item.getString());
                    else
                        fields.put(item.getFieldName(),item);
                }
                FileItem uplFile=(FileItem)fields.get("NewFile");
                String fileNameLong=uplFile.getName();
//                System.out.println(fileNameLong);
                fileNameLong=fileNameLong.replace('\\','/');
                String[] pathParts=fileNameLong.split("/");
                String fileName=pathParts[pathParts.length-1];
//                System.out.println(fileName+"ccccccccccc");
                String nameWithoutExt=getNameWithoutExtension(fileName);
                System.out.println(nameWithoutExt);
                String ext=getExtension(fileName);
                System.out.println(ext);
//            上传图片信息，添加到数据库中 开始
                List <ImageMessage> imlist=new ArrayList<ImageMessage>();
                   ImageMessage img=new ImageMessage();
                   img.setImageName(fileName);
                   img.setImagePaht(currentDirPath);
                   imlist.add(img);
                   LinkDatabase link=new LinkDatabase();
                   link.insertMessage(imlist);
            //结束
                File pathToSave=new File(currentDirPath,fileName);
                int counter=1;
                while(pathToSave.exists()){
                    newName=nameWithoutExt+"("+counter+")"+"."+ext;
                    retVal="201";
                    pathToSave=new File(currentDirPath,newName);
                    counter++;
                    }
                uplFile.write(pathToSave);
            }catch (Exception ex) {
                retVal="203";
            }
           
        }
       
        out.println("<script type=\"text/javascript\">");
        out.println("window.parent.frames['frmUpload'].OnUploadCompleted("+retVal+",'"+newName+"');");
        out.println("</script>");
        out.flush();
        out.close();
   
        if (debug) System.out.println("--- END DOPOST ---");   
       
    }
三、动态的修改工具栏
    
       修改fckconfig.js文件。
   在添加下面代码，把“Default”，改为自定义工具名称。在jsp 页面设置FCKeditor实例      oFCKeditor.setToolbarSet("自定义工具名称");

     FCKConfig.ToolbarSets["Default"] = [
    ['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form','Checkbox','Radio','TextField','Textarea','Select','Button','ImageButton','HiddenField'],
       '/',
    ['Style','FontFormat','FontName','FontSize'],
    ['TextColor','BGColor'],
    ['FitWindow','-','About']
] ;

部分内容摘自http://blog.csdn.net/small_city/archive/2007/07/12/1685934.aspx

附件中包括了完整的FCKeditor文件以及配置好的工程源码

PS:项目中用到了struts2，上传时候同样碰到了权限问题，原来是因为struts2的拦截器导致，所以修改filter-mapping即可以：

引用

<filter-mapping>  
        <filter-name>struts2</filter-name>  
        <url-pattern>*.action</url-pattern>  
    </filter-mapping>  
 
 
    <filter-mapping>  
        <filter-name>struts2</filter-name>  
        <url-pattern>*.jsp</url-pattern>  
    </filter-mapping>