FCKeditor在Java项目中应用

        这是来到新公司头儿给我的第一个活儿,网上一搜资料挺多,整理如下
        FCKeditor 2.3.1 是功能完善的可视化编辑器,文件上传管理部分功能已经支持asp,php,aspx...等等,唯独尚未支持jsp,幸运的是Simone Chiaretta制作了Java 的整合文件FCKeditor.Java。
1. 下载最新版的FCKeditor
        http://www.fckeditor.net/download/
        目前最新版是:FCKeditor_2.3.2(我用的是2.3.1)和 FCKeditor.Java
(FCKeditor-2.3)
2. 简介
        解压FCKeditor 2.3.1.zip后得到如下目录结构:
FCKeditor_2.3.1
---editor
    ---_source (有的资料说要删除此文件夹,删除将会出现很多初始化js错误)
    ---css(样式)
    ---dialog(editor所有的网页对话框都在这里了)
    ---filemanager(文件上传管理部分)
        ---browser(存放用于浏览选择上传到服务器的文件,创建文件夹的浏览器)
        ---defult
             ---connectors(asp、php 、aspx等实现文件浏览、创建文件夹的文件。java项目中用 connectorservlet.Java实现,所以可以删除下面所有文件)
        ---upload(asp、php、aspx等实现文件上传时的文件,java项目中用 servlet实现上传,所以可以删除下面所有文件)
    ---images(editor使用到的图片)
    ---js
    ---lang (存放用于支持多语言的js文件)
    ---plugins(扩展插件)
    ---skins(editor皮肤,2.3.1版有default、office 2003和silvers三种)
fckconfig.js
fckeditor.js
fckstyles.xml
fcktemplates.xml
….其余文件删掉即可
解压FCKeditor 2.3.zip后得到如下目录结构:
FCKeditor_2.3
---docs
    ---api(api文档,介绍了类的功能和配置方法)
---src(java源文件)
---web
    ---_samples
    ---web-inf
         ---lib(存放FCKeditor-2.3.jar 和Apache文件上传开源项目commons-fileupload.jar)
        Web.xml
Build.xml
Readme.txt

3. demo
我的开发环境是eclipse3.1和Myeclipse4.1,jdk1.5,resin-pro-3.0.18
    3.1 建立一个webproject,命名为FCKeditor
    3.2 将FCKeditor_2.3.1下的editor文件夹和fckeditor.js,fckconfig.js,fckstyles.xml,fcktemplates.xml拷贝到FCKeditor/webroot下。
    3.3 FCKeditor.java 2.3解压后,把其中的web目录下的WEB-INF目录和copy到FCKeditor/webroot下(里面有commons-fileupload.jar, FCKeditor-2.3.jar,web.xml等几个文件), 再把其中的src目录下的FCKeditor.tld文件copy到FCKeditor/webroot/WEB-INF/下,_samples文件夹拷贝到FCKeditor/webroot/下。
    3.4 修改web.xml和FCKeditor/webroot/editor/fckconfig.js:
<web-app>
        <display-name>FCKeditor Test Application</display-name>

        <servlet>
                <servlet-name>Connector</servlet-name>
                <servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
                <init-param>
                        <param-name>baseDir</param-name>
[color=darkred]将在FCKeditor/editor/下创建Image和Flash文件夹,用于存放上传文件[/color]
                        <param-value>/editor/</param-value>
                </init-param>
                <init-param>
                        <param-name>debug</param-name>
                        <param-value>false</param-value>[color=darkred]调试时设为true[/color]
                </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>
[color=darkred]将在FCKeditor/editor/下创建Image和Flash文件夹,用于存放上传文件[/color]
                        <param-value>/editor/</param-value>
                </init-param>
                <init-param>
                        <param-name>debug</param-name>
                        <param-value>true</param-value>[color=darkred]调试时设为true[/color]
                </init-param>
                <init-param>
                        <param-name>enabled</param-name>
                        <param-value>true</param-value>[color=darkred]修改成true[/color]
                </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>
[color=darkred]和fckconfig.js的ImageBrowserURL等对应[/color]
                <url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
        </servlet-mapping>

        <servlet-mapping>
                <servlet-name>SimpleUploader</servlet-name>
[color=darkred]这里你可以按自己应用具体配置,需要和fckconfig.js的ImageUploadUrl等对应[/color]
                <url-pattern>/editor/upload.do</url-pattern>
        </servlet-mapping>

        
        <welcome-file-list>[color=darkred]配置欢迎文件[/color]
                <welcome-file>_samples/index.jsp</welcome-file>
        </welcome-file-list>
        
        <taglib>
                <taglib-uri>/etag</taglib-uri>[color=darkred]配置FCKeditor自定义标签[/color]
                <taglib-location>/web-inf/FCKeditor.tld</taglib-location>
        </taglib>

</web-app>
  

        [color=darkred]修改 fckconfig.js中:[/color]
FCKConfig.DefaultLanguage = 'zh-cn' ; [color=darkred]修改默认语言为简体中文[/color]

    把FCKConfig.LinkBrowserURL等的值替换成以下内容:

FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/" + _FileBrowserLanguage + "/connector"

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

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

FCKConfig.LinkUploadURL = FCKConfig.BasePath + "filemanager/upload/" + _QuickUploadLanguage + "/connector?Type=File";

FCKConfig.ImageUploadURL=FCKConfig.BasePath + "upload.do?Type=Image";

FCKConfig.FlashUploadURL=FCKConfig.BasePath+ "upload.do?Type=Flash";
[color=darkred]Connector参数的值完全可以修改,只要和web.xml中配置一致即可[/color]
    3.5    有的例子说必须在FCKeditor/webroot/editor/下手工新建Image和Flash两个文件夹,FCKeditor不会自己创建文件上传的文件夹,否则无法上传文件,将提示无权操作,在java应用下无需自己创建,ConnectorServlet会在你第一次执行文件浏览时,根据url的type参数,判断baseDir下是否存在以type值为名字的文件夹,不存在就创建它。

3.6    在JbossHome\lib\endorsed 下的4个文件是xml解析器,整个endorsed文件夹复制到$JAVA_HOME\jre\lib\下面,其中xalan.jar放在ResinHome\lib\下[color=darkred]或[/color]你的应用的web-inf\lib下

    3.7    启动resin,发布应用,浏览器键入http://localhost:8080/FCKeditor即看到sample1页面,选择samplelist中的不同选项感受FCKeditor的功能吧,还不错。(没有使用过eclipse的同学直接将应用coyp到服务器的deploy目录下就行,tomcat放在webapps下)

对了,sample02等用自定义标签生成editor的时候得把所有的路径参数删除(用fckconfig.js中得配置即可)或修改成正确得路径!

           时间有限,只是简单的了解了如何应用,待日后再深入学习吧!
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值