当前位置: 代码迷 >> JavaScript >> 在jsp中运用FCKeditor
  详细解决方案

在jsp中运用FCKeditor

热度:112   发布时间:2012-11-01 11:11:33.0
在jsp中使用FCKeditor
一、准备

下载FCKeditor的最新版本2.6RC(这个是核心)FCKeditor_2.6.zip,若在Java环境中使用,还需要下载FCKeditorfor java的工具包FCKeditor.Java2.4(这里面提供了标签库和图片上传的jar)FCKeditor-2.4.zip 。

二、配置

新建工程compass,在WebRoot文件夹下新建文件夹FCKeditor(用来存放FCKeditor相关文件)
将FCKeditor_2.6包中的 edit文件夹和fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml这四个文件放到项目中的 FCKeditor 目录。
将FCKeditor-2.4.zip 包中的\web\WEB-INF\lib 下的两个 jar 文件到项目的 WebRoot\WEB-INF\lib 目录
将FCKeditor-2.4.zip 包中的\src 下的 FCKeditor.tld 文件到项目的WebRoot\WEB-INF 目录
在 WebRoot 目录下新建 UserFiles 文件夹,在此文件夹下新建 Image和 Flash 两个文件夹
修改 web.xml 文件,加入以下内容
<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>
   <!--此参数为是否开启上传功能,默认的是false改为true-->
    <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>/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>   刷新一下工程,有一个文件会出错,不管它是什么错,将错误信息清除
三、应用

新建一个提交页test.jsp 文件和一个接收页 test1.jsp 文件

test.jsp代码如下:

test1.jsp 代码如下:

就可以开始测试了,尤其是上传图片、flash功能

四、优化

删除 \WebRoot\FCKeditor\editor\filemanager\browser\default\connectors目录下所有的文件,这些是用来浏览文件的,对于jsp的话是使用了 servlet 来处理,所以这些文件都是多余的

删除 \WebRoot\FCKeditor\editor\filemanager\upload目录下所有的文件

删除 WebRoot\FCKeditor\editor\lang目录下不需要的语言,如保留中文和英文还有 fcklanguagemanager.js 文件

删除 \WebRoot\FCKeditor\editor\skins目录下不需要的皮肤文件,有三种皮肤,可根据需要进行删除

删除 \WebRoot\FCKeditor\editor\dialog\fck_image目录下 fck_image_preview.html文件中的部份文字,这些文字是出现在浏览图片时在预览框中的内容






<html>  
   <head>  
     <title>TEST</title>  
   </head>  
    
   <body>  
     <%=request.getParameter("testfck")%>  
   </body>  
</html>  

java 代码

  
<%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="fck" %>  
<html>  
   <head>  
     <title>Test</title>  
   </head>  
    
   <body>  
     <FORM action="updateMessage.jsp">  
     <fck:editor id="testfck" basePath="/compass/FCKeditor/"  
         height="100%"  
         skinPath="/compass/FCKeditor/editor/skins/default/"  
         toolbarSet="Default"  
         imageBrowserURL="/compass/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"  
         linkBrowserURL="/compass/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"  
         flashBrowserURL="/compass/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"  
         imageUploadURL="/compass/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"  
         linkUploadURL="/compass/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"  
         flashUploadURL="/compass/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">  
     </fck:editor>  
     </FORM>  
   </body>  
</html>  
  相关解决方案