`
henghengdh
  • 浏览: 152884 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Jsp中使用FCKeditor上传图片(转自：http://blog.csdn.net/daichenghua/article/details/2261414)

 
阅读更多
简介：

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

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


先去下载一个FCKeditor，再下一个FCKeditor.java 2.3 (FCKeditot for java) 这个文件就是用来让它支持JSP的，我找了FCKeditor的官网，不过下载地址好像不大好用，建议去http://sourceforge.net/下载。网上说还有一个东西要下，就是xalan.jar，xml.apache.org是它的网站。


现在开始设置，先到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了，你可以这样做：


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


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


３、在现有系统的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以开启文件上传功能！


４、然后把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):
    // http://support.microsoft.com/default.aspx?scid=kb;en-us;831678
    // 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):
    // http://support.microsoft.com/default.aspx?scid=kb;en-us;831678
    // 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请
分享到：
| .struts2-redirect和redirect-action的一 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    开源的搜索引擎[转]

    2.新增加采集功能，采集时图片下载，flash下载功能，默认配置的是南海网分类信息的采集规则； 3.该代码简洁，完全开源，可以与网博多款新闻系统无缝整合； 4.最新新闻系统已增加伪静态与全站生成静态功能。 5.后台...

    Tomcat 5.5.26 Administration Tool HTTP Status 500 临时解决

    用于解决使用 Tomcat 5.5.26 Administration Tool 的 Delete Existing Hosts 功能时发生 HTTP Status 500 错误，详见 http://blog.csdn.net/LaoBai_2006/archive/2008/08/28/2844042.aspx。 md5: f8ad905990a96f...

    基于Java使用FCKeditor

    FCKeditor例子 博文链接：https://weiye.iteye.com/blog/32442

    EntLib.com 开源ASP.NET 博客系统中文定制化开发v2.1（项目源码下载）

    基于Subtext v2.0 开源ASP.NET博客系统9.1在http://blog.EntLib.com 上线，部分网友联系尽快需要项目源码。尽管目前系统还有很多功能需要改进和加强，这里先提供一个初期的版本v2.1。 EntLib.com 在Subtext v2.0 ...

    HTML编辑器FCKeditor使用详解

    NULL 博文链接：https://tianshidehuhuan.iteye.com/blog/430993

    FCKeditor.Net_2.5

    Version 2.5 Attention : This version is not compatible with releases before FCKeditor 2.5.1. &lt;br&gt;New Features and Improvements: &lt;br&gt;[#1548] Compatible with Safari 3.0+ and Opera 9.50+....

    fckeditor for JAVA所需要的所有文件

    fckeditor for JAVA所需要的所有文件 包括： FCKeditor_2.6.3.zip //主文件 fckeditor-java-2.4.1-bin.zip //jsp整合包 fckeditor-java-demo-2.4.1.war ...http://blog.csdn.net/huliang82/ 共同探讨...

    grails中使用fckeditor,配置代码高亮

    fckeditor插件 博文链接：https://sword721.iteye.com/blog/211432

    fckEditor显示文件按日期时间排序

    上传文件包括“FredCK.FCKeditorV2.dll”、“frmresourceslist.html”。 最近开发asp.net网站，用到fckEditor控件。但是客户一直说上传的...详情：http://blog.csdn.net/caihn1983/archive/2010/12/30/6107914.aspx

    fckeditor的两种资源包

    使用方法在我博客https://abcdefg.blog.csdn.net/article/details/132460044?spm=1001.2014.3001.5502

    FCK导入WORD项目

    对于大多数用户来说，将Word中的图片上传到Web服务器来说是一件非常不方便的事情，许多情况下用户甚至需要手动将一张张图片上传到Web服务器中，这些重复操作将会浪费用户的许多时间。 现在新颖网络发布了Word图片...

    JAVA WEB典型模块与项目实战大全.part1（第一卷）

    http://download.csdn.net/detail/jincheng52rmb/5349256 http://download.csdn.net/detail/jincheng52rmb/5349247 http://download.csdn.net/detail/jincheng52rmb/5349230 典型模型与项目实战大全&gt;&gt; 出版社: 清华...

    FCKeditor.Net_2.2安全修正版

    相关安全文件参看：《在.net中使用Fckeditor》 http://cliffever.cnblogs.com/archive/2006/05/09/395134.aspx《FCKeditor 實戰技巧》//www.jb51.net/html/200609/1206.htm《asp.net下FCKeditor的安全问题》...

    Fckeditor报 xml request error：404

    FCKeditor for java 博文链接：https://814318774.iteye.com/blog/1659942

    FCKEDITOR_ASP版

    具体设置参考：http://blog.csdn.net/duan618/article/details/5420528

    jsp中使用FCKEditor

    NULL 博文链接：https://xwpxcom.iteye.com/blog/727624

    fckeditor.js文件中文注释

    fckeditor.js文件中文注释 更新可以查看文章: http://blog.csdn.net/nileader4dev/archive/2010/12/12/6070727.aspx

    yiwang-php.rar_PHP旅游网站_旅游php_旅游后台管理_旅游网站PHP_网站

    亿网旅游网站管理系统是由PHP+MYSQL架设的网站，后台编辑器使用FCKeditor编辑器 。 管理功能： 1、旅游线路分类详细、后台添加线路、在线预订。 2、酒店按各地划分，后台直接添加，提供在线预订功能。 3、景点...

    java /jsp FCKeditor 配置

    通过复制粘贴实现FCKeditor 的使用. 看拉大家的留言,为使大家下载多能使用,补充个注意点; 在jsp页面出现FCKeditor 引用错误. 把页面中的下面代码中 &lt;FCK:editor id="infoContent" basePath="../../FCKeditor/" ...

    PHP FCKeditor_2.6.6 瘦身精简版 带重命名上传+实例使用说明

    http://www.jb51.net/article/12647.htm 五、php文件应用 事例 http://localhost/ictech/fadd.php include("fckeditor.php"); $sBasePath="/ictech/";//编辑器所在目录 $oFCKeditor=new FCKeditor('fileinfo');...

Magicbox
Global site tag (gtag.js) - Google Analytics