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'] 
] ; 

 附件中包括了完整的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>