随笔 - 251  文章 - 504  trackbacks - 0
<2011年8月>
31123456
78910111213
14151617181920
21222324252627
28293031123
45678910

本博客系个人收集材料及学习记录之用,各类“大侠”勿扰!

留言簿(14)

随笔分类

收藏夹

My Favorite Web Sites

名Bloger

非著名Bloger

搜索

  •  

积分与排名

  • 积分 - 200393
  • 排名 - 285

最新评论

 由于网站的图片上传出点小问题,决定试用在线编辑的利器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请

参考相关网站。

打开 http://localhost:8080/web/index.jsp(tomcat)  或者 http://localhost:7001/web/index.jsp(weblogic)后可以试用咯!

祝您成功,如果有描述不清楚的地方,请与我联系。

以上已经测试成功。

posted on 2006-12-16 18:48 matthew 阅读(4070) 评论(3)  编辑  收藏 所属分类: JavaEE

FeedBack:
# re: FCKeditor中使用JSP版本上传图片、flash以及文件-转贴 2007-02-26 17:54 aaa
修改配置里面的第3步有没有啊?  回复  更多评论
  
# re: FCKeditor中使用JSP版本上传图片、flash以及文件-转贴 2007-03-13 15:50 aaa
请问放在linux服务器上怎么配置,请联系qq165559631  回复  更多评论
  
# re: FCKeditor中使用JSP版本上传图片、flash以及文件-转贴 2011-08-23 16:57 11
ri ni ma bi  回复  更多评论
  

只有注册用户登录后才能发表评论。


网站导航: