Jsp中使用FCKeditor上传图片

简介:

FCKeditor功能还真是强大,但它好像对Jsp不大敏感,网上介绍的文章也少。赶上最近要研究用FCKeditor上传图片,刚发现了几篇,加上自己的研究成果,赶快总结一下。

内容:

FCKeditor功能还真是强大,但它好像对Jsp不大敏感,网上介绍的文章也少。赶上最近要研究用FCKeditor上传图片,刚发现了几篇,加上自己的研究成果,赶快总结一下。先去下载一个FCKeditor,再下一个FCKeditor.java 2.3 (FCKeditot for java) 这个文件就是用来让它支持JSP的。

现在开始设置,先到tomcat->webapps里建立一个文件夹叫mysite。把FCKeditor里的/editor和fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四个文件copy到mysite文件夹里,因为别的文件对我们来说没有什么意义。再把FCKeditor.java 2.3中的web目录下的WEB-INF目录copy到mysite下(里面有commons-fileupload.jar, FCKeditor-2.3.jar,web.xml等几个文件), 把其中的src目录下的FCKeditor.tld文件copy到mysite/WEB-INF/下.这样它才支持JSP。

 

下面我们要对其中的一些文件进行修改:

打开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'' ;

 

打开WEB-INF下面的web.xml文件:

把SimpleUploader中的配置属性enabled定义为true(开启文件上传功能) 

添加标签定义: 

<taglib> 

<taglib-uri>/mysite</taglib-uri> 

<taglib-location>/WEB-INF/FCKeditor.tld</taglib-location> 

</taglib>

 

这样文件就设置完了,这时建立一个jsp文件试试: 

<%@ page contentType="text/html; charset=gb2312" language="java" import="java.sql.*" import="java.util.*" import="java.text.*" errorPage="" %>

<%@ page language="java" import="com.fredck.FCKeditor.*" %>

<%@ taglib uri="/mysite" prefix="FCK" %>

<script type="text/javascript" src="/mysite/fckeditor.js"></script>

<form method="POST" action="Bs_Bulletin_save.jsp">

<table width="100%" border="0" cellspacing="1" cellpadding="2">

  <tr>

<td width="19%" bgcolor="#F0F0F0" height="25" align="right">标题:</td>

<td width="81%" bgcolor="#F0F0F0"><INPUT TYPE="text" NAME="title" size="58"></td>

</tr>

<tr> 

<td width="19%" height="300" bgcolor="#F0F0F0">

<div align="center">中文信息设置<BR><BR>

<span style="color: #FF0000">支持html(图片大小宽度不要超过170个象素)</span></div>

</td>

<td width="81%" bgcolor="#F0F0F0">

<textarea name="content" cols="58" rows="15"></textarea>

<script type="text/javascript">

var oFCKeditor = new FCKeditor(''content'') ;

oFCKeditor.BasePath = "/mysite/" ;

oFCKeditor.Height = 400;

oFCKeditor.ToolbarSet = "Default" ; 

oFCKeditor.ReplaceTextarea();

</script>

</td>

</tr>

<tr>

<td width="19%" height="25" bgcolor="#F0F0F0">发布时间:</td>

<td width="81%" bgcolor="#F0F0F0"><INPUT TYPE="text" NAME="datatimes" value="<%=time%>" size="58"></td>

</tr>

<tr> 

<td colspan="2" bgcolor="#F0F0F0">

<div align="center"><input type="submit" value=" 添 加 " name="cmdok">&nbsp;<input type="reset" value=" 重 写 " name="cmdcancel"></div></td>

</tr>

</table>

</form>

加红字的部分,就是调用这个在线编辑器了。现在上传的图看一下,提示internal server error 500,还记得一开始时,我们提到的xalan.jar吗,现在把xalan.jar放到lib文件夹里,关掉tomcat再重起一下,应该好用了……

 

注意,如果想把这个控件融入你现有的web应用系统中,就不需要新建mysite了,你可以这样做:

 

1、把FCKeditor里的/editor和fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四个文件直接copy到现有web应用的某个目录下。

 

2、把FCKeditor.java 2.3中WEB-INF目录里的commons-fileupload.jar, FCKeditor-2.3.jar放在现有系统的lib目录下。

 

3、在现有系统的web.xml中加入FCKeditor.java 2.3中web.xml的配置信息,并添加标签定义: 

<taglib> 

<taglib-uri>/mysite</taglib-uri> 

<taglib-location>/WEB-INF/FCKeditor.tld</taglib-location> 

</taglib>

这里别忘了把SimpleUploader中的配置属性enabled定义为true以开启文件上传功能!

 

4、然后把FCKeditor.tld文件copy到现有系统的WEB-INF/下,这样就可以了。当然,FCKeditor.tld的位置不是绝对的,你可以放在其它地方,只要在前面的标签定义中指定相应的位置就行了。

 

附:FCKeditor.java中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>false</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>

<param-value>/UserFiles/</param-value><!--上传附件所在根路径 -->

</init-param>

<init-param>

<param-name>debug</param-name>

<param-value>false</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>2</load-on-startup>

</servlet>

<servlet-mapping>

<servlet-name>Connector</servlet-name>

<url-pattern>/webapp/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern><!--FCKeditor所在目录,即/editor和fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml四个文件所在目录 -->

</servlet-mapping>

<servlet-mapping>

<servlet-name>SimpleUploader</servlet-name>

<url-pattern>/webapp/FCKeditor/editor/filemanager/upload/simpleuploader</url-pattern><!--FCKeditor所在目录 -->

</servlet-mapping>

<taglib>

<taglib-uri>/home/project/law/FCKeditor</taglib-uri>

<taglib-location>/WEB-INF/FCKeditor.tld</taglib-location><!--FCKeditor.tld路径 -->

</taglib>

 

FCKeditor中使用JSP版本上传图片、flash以及文件

 

          简单就好

         由于网站的图片上传出点小问题,决定试用在线编辑的利器FCKeditor,查了些资料,大都讲述php/asp环境下的应用,所以决定自己测试一下,没想到2小时就搞定咯。当然相信看了文档的你,将更加轻松完成。本文仅仅描述如何修改配置,不涉及相关服务器配置等等。如有疑问请与我联系。

(一) 准备工作

1、下载FCKeditor2.1.1最新版本;

2、下载FCKeditor2.3,java版本;

3、Tomcat或者weblogic作为服务器(都测试过)

(二)新建web工程??FCKeditor

1、解压上述FCKeditor2.3 for java,并copy src和web两个文件夹到web工程??FCKeditor下,覆盖

src和web;并将_samples下的jsp 文件copy到web目录下

2、解压FCKeditor2.1.1 ,并copy到web工程的web文件夹中,将一些不需要的文件夹,比如_samples和_testcases以及editor/_source 删除,节约空间,另外如果仅仅使用JSP环境的话,也可以将其他环境下的配置信息或者测试用例删除。

3、在你的工程的web目录下创建UserFile目录,以及Image、Flash、File三个子目录。

您的工程目录如下所示:

 

(三)、修改相关配置

现在开始修改代码咯,从/FCKeditor/fckconfig.js以及/FCKeditor/fckeditor.js开始。

fckconfig.js

FCKConfig.LinkBrowser = true ;

FCKConfig.LinkBrowserURL = FCKConfig.BasePath + ''filemanager/browser/default/browser.html?Connector=connectors/jsp/connector'' ;

FCKConfig.LinkBrowserWindowWidth = FCKConfig.ScreenWidth * 0.7 ; // 70%

FCKConfig.LinkBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ;// 70%

FCKConfig.ImageBrowser = true ;

FCKConfig.ImageBrowserURL = FCKConfig.BasePath + ''filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector'' ;

FCKConfig.ImageBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ; // 70% ;

FCKConfig.ImageBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; // 70% ;

FCKConfig.FlashBrowser = true ;

FCKConfig.FlashBrowserURL = FCKConfig.BasePath + ''filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector'' ;

FCKConfig.FlashBrowserWindowWidth  = FCKConfig.ScreenWidth * 0.7 ; //70% ;

FCKConfig.FlashBrowserWindowHeight = FCKConfig.ScreenHeight * 0.7 ; //70% ;

FCKConfig.LinkUpload = true ;

FCKConfig.LinkUploadURL = FCKConfig.BasePath + ''/editor/filemanager/upload/simpleuploader?Type=File'';

FCKConfig.LinkUploadAllowedExtensions = "" ;   // empty for all

FCKConfig.LinkUploadDeniedExtensions = ".(php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi)$" ; // empty for no one

FCKConfig.ImageUpload = true ;

FCKConfig.ImageUploadURL = FCKConfig.BasePath + ''/editor/filemanager/upload/simpleuploader?Type=Image'';

FCKConfig.ImageUploadAllowedExtensions = ".(jpg|gif|jpeg|png)$" ;  // empty for all

FCKConfig.ImageUploadDeniedExtensions = "" ;       // empty for no one

FCKConfig.FlashUpload = true ;

FCKConfig.FlashUploadURL = FCKConfig.BasePath + ''/editor/filemanager/upload/simpleuploader?Type=Flash'';

FCKConfig.FlashUploadAllowedExtensions = ".(swf|fla)$" ;  // empty for all

FCKConfig.FlashUploadDeniedExtensions = "" ;     // empty for no one

 

 

主要是上述URL配置。另外修改fckeditor.js:

var FCKeditor = function( instanceName, width, height, toolbarSet, value )

{

 // Properties

 this.InstanceName = instanceName ;

 this.Width   = width   || ''100%'' ;

 this.Height   = height  || ''400'' ;

 this.ToolbarSet  = toolbarSet || ''Custom'' ;//Custom是自定义的工具栏,根据需要自由更改

 this.Value   = value   || ''   '' ;

 this.BasePath  = ''/FCKeditor/editor/'' ;//取自己工程的相对路径

 this.CheckBrowser = true ;

 this.DisplayErrors = true ;

 this.EnableSafari = false ;  // This is a temporary property, while Safari support is under development.

 this.Config   = new Object() ;

 // Events

 this.OnError  = null ; // function( source, errorNumber, errorDescription )错误处理函数

}

3、找到/FCKeditor/editor/dialog/fck_image/fck_image.js和/FCKeditor/editor/dialog/fck_flash/fck_flash.js中下述片断

if ( oEditor.FCKBrowserInfo.IsIE ){

    // The following change has been made otherwise IE will open the file 

    // browser on a different server session (on some cases):

    // by Simone Chiaretta.

    var oWindow = oEditor.window.open( url, "FCKBrowseWindow", sOptions ) ;

    oWindow.opener = window ;

}else{

         window.open( url, "FCKBrowseWindow", sOptions ) ;

}

修改为:

if ( oEditor.FCKBrowserInfo.IsIE ){

    // The following change has been made otherwise IE will open the file 

    // browser on a different server session (on some cases):

    // by Simone Chiaretta.

             window.open( url, "FCKBrowseWindow", sOptions ) ;

   }else{

          var oWindow = oEditor.window.open( url, "FCKBrowseWindow", sOptions ) ;

        oWindow.opener = window ;

}

 

这样在IE在浏览服务器的文件,才可以选择,否则逻辑相反的话,打开的服务器文件浏览页面在对话框下面,无法选择文件或图片等。

4、配置JSP所需的标签库

将FCKeditor.tld  copy到/WEB-INF/下,并修改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>false</param-value>

        </init-param>

        <load-on-startup>2</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>

            <param-value>/UserFiles/</param-value>

        </init-param>

        <init-param>

            <param-name>debug</param-name>

            <param-value>false</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/>

        </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|htm|html</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/>

        </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/>

        </init-param>

        <load-on-startup>1</load-on-startup>

    </servlet>

此外可以根据需要修改/src/com/fredck/FCKeditor/tags/FCKeditorTag.java以及/src/com/fredck/FCKeditor/FCKeditor.java文件

自定义默认的配置信息。

public class FCKeditor {

 

 private FCKeditorConfigurations oConfig;

 private String instanceName;

 private String value = "  ";//这样标签体可以置空

 private String basePath;

 private String toolbarSet = "Custom";//默认为自定义

 private String width = "100%";

 private String height = "300";//默认为300px

 

 HttpServletRequest request;

……

 public FCKeditor(HttpServletRequest req, String parInstanceName){

  request=req;

/**

  *这里 /FCKeditor/ 必须和工程web目录下的FCKeditor目录同名,大小写敏感

 */ 

  basePath = request.getContextPath() + "/FCKeditor/";

  instanceName=parInstanceName;

  oConfig = new FCKeditorConfigurations() ;

 }

此时,可以在JSP中使用如下标签咯(参见sample2.jsp)

imageBrowserURL="/web/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"

    linkBrowserURL="/web/FCKeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"

    flashBrowserURL="/web/FCKeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"

    imageUploadURL="/web/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Image"

    linkUploadURL="/web/FCKeditor/editor/filemanager/upload/simpleuploader?Type=File"

    flashUploadURL="/web/FCKeditor/editor/filemanager/upload/simpleuploader?Type=Flash">

并且可以上传图片、flash、文件等等。

将工程部署到tomcat或者weblogic下,可以直接指向工程路径,散布。关于如何配置tomcat、weblogic请

 

 

http://dev.firnow.com/course/4_webprogram/jsp/jsp_js/2008410/108745.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值