FCKeditor编辑器在JAVA中的使用与配置

FCKeditor编辑器在JAVA中的使用与配置
FCKeditor编辑器在JAVA中的使用与配置

一、工作前的准备

版本是fckeditor_2.6.4.zip【组件的主文件包】,fckeditor-java-2.4.1-bin.zip 【这里面提供了标签库和图片上传的jar】。这些都可以在https://www.360docs.net/doc/4d7125371.html, 网站下载到!本人用的是fckeditor_2.6.4.zip和fckeditor-java-demo-2.4.1.zip包中的所有组件。

二、开发环境

myeclipse7.0,mysql 5.1,apache-tomcat-6.0.18和JDKjdk1.6.0_12。这些都可到网上下载。

三、配置

1. 新建工程News_Demo。

2. 将fckeditor_2.6.4.zip包中的fckeditor 文件夹复制到WebRoot目录下。在fckeditor目录下有editor子目录和fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml、fckpackager.xml等文件。

3. 将fckeditor-java-demo-2.

4.1.zip 包中的 \WEB-INF\lib 下的五个 jar 文件到项目的 WebRoot\WEB-INF\lib目录下

1、2、3步做完后项目的目录结构如下:

4. 在 WebRoot 目录下新建 UserFiles 文件夹,在此文件夹下新建 Image、 Flash 、

File、Media四个文件夹,他们分别用来存放上传的图片、动画、文件、媒体文件

5. 修改fckconfig.js组件配置文件【说明一下,你可以在配置文件里搜索等号前面的信息来确定某一项做更改】:

A、FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/silver/' ;

这是组件的样式模板,好确定你到底需要使用哪中样式,这个根据你自己的喜好更改,

B、FCKConfig.DefaultLanguage = 'zh-cn' ;

这个是确定你需要使用哪中语言,设定成上面的表示使用简体中文;

C、更改文件浏览的路径:

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/c onnector" ;

FCKConfig.FlashBrowserURL = FCKConfig.BasePath +

"filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/c onnector" ;

把相应的信息屏蔽掉,使用上面的

D、更改上传文件的路径

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

把相应的信息屏蔽掉,使用上面的

6. 修改 web.xml 文件,加入以下内容:

在fckeditor-java-demo-2.4.1.zip包中有个\WEB-INF\WEB.XML,把这个节点里面的内容复制到你的工程里面的相应的位置,值得说明的地方是:

四、优化

以上都是把组件嵌入进工程的配置过程,下面我们来把组件压缩优化一下,把无用的文件给剔除掉:

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

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

删除 WebRoot\FCKeditor\editor\lang 目录下不需要的语言,如保留中文【zh-cn.js】和英文[EN.js]还有 fcklanguagemanager.js 文件

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

五、JSP页面上的使用

★首先在输入jsp页面的页头加上标签使用语句【不需要做目录调整,已经切实可行】:<%@ taglib uri="https://www.360docs.net/doc/4d7125371.html," prefix="FCK"%>

在页面head中加脚本:

★然后在页面的相应位置增加调用语句,对于FCK标签,里面还可以增加很多属性,当然也可以不加,注意下面粗体的地方,我下面使用了2个比较常用的属性,一个是高度的调整,另一个是组件风格

★接收参数可以这么写

<%=request.getParameter("content")%>

六、其它

1、fckconfig.js总配置文件,可用记录本打开,修改后将文件存为utf-8 编码格式。找到:

FCKConfig.TabSpaces = 0 ; 改为FCKConfig.TabSpaces = 1 ; 即在编辑器域内可以使用Tab键。

2、如果你的编辑器还用在网站前台的话,比如说用于留言本或是日记回复时,那就不得不考虑安全

了,在前台千万不要使用Default的toolbar,要么自定义一下功能,要么就用系统已经定义好的Basic,也就是基本的toolbar,找到:

FCKConfig.ToolbarSets["Basic"] = [

['Bold','Italic','-','OrderedList','UnorderedList','-',/*'Link',*/'Unlink' ,'','Style','FontSize','TextColor','BGColor','-','Smiley','SpecialChar','Replac e','Preview'] ] ;

这是改过的Basic,把图像功能去掉,把添加链接功能去掉,因为图像和链接和flash 和图像按钮添加功能都能让前台页直接访问和上传文件, fckeditor还支持编辑域内的鼠标右键功能。

FCKConfig.ContextMenu = [

'Generic',/*'Link',*/'Anchor',/*'Image',*/'Flash','Select','Textarea','Che ckbox',

'Radio','TextField','HiddenField',/*'ImageButton',*/'Button','BulletedList ',

'NumberedList','TableCell','Table','Form'] ;

这也是改过的把鼠标右键的“链接、图像,FLASH,图像按钮”功能都去掉。

3、找到:FCKConfig.FontNames =

'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;

加上几种我们常用的字体:

FCKConfig.FontNames = '宋体;黑体;隶书;楷体_GB2312;Arial;Comic Sans MS;

Courier New;Tahoma;Times New Roman;Verdana' ;

4、注意上传的文件名不能有中文,否则无法正常显示或链接下载。

5、精简控件,当然是文件精简而非功能精简化.进入到editor文件夹内,先把“_source”文件夹删除,这里是一些源文件,对于使用来说没什么用处。

进入images文件夹,删除smiley文件夹,些文件是放表情图标的,由于接下来我会用我自己的表情图标,先把他们的删除,当然,如果你想用这里的表情图标那就不要删掉了。退出images再进入lang文件夹内,这里的东西可以来个大清洗了,只保留fcklanguagemanager.js、zh-cn.js、en.js、zh.js这四个文件,第一个文件是语言配置文件,有了它才能和 fckconfig.js里的设置成对对应上相应的语言文件,zh-cn.js是简体中文语言包,en.js就不用说了吧,zh.js是繁体中文的。怎么样?一下子少了几百K,爽吧~

再退出lang文件夹,进入skin文件夹,如果你想使用fckeditor默认的这种奶黄色,那就把除了default文件夹外的另两个文件夹直接删除,如果想用别的,那就自己考虑了,不过我给你个建议,如果不想用默认的,那就选那个silver,因为银色也就是灰色和任何颜色配起来都不会难看,而那个office2003的皮肤,反正我是非常不喜欢的,并且图片相对也比较大,又增加了下载时间,不要!

精简的最后一步,退出skin文件夹,再进入filemanager,如果你用的不是最新版的fckeditor的话,那这里就一个文件夹 browser,新版的还有一个upload文件夹。一个个来,先进入到filemanager/browser/default/connectors/下统统删除然后再进入filemanager/upload/下,统统删除

七、解决中文图片上传后乱码问题

在Fckeditor For Java中的中文乱码主要有三个方面:

一、中文图片上传后文件名显示为乱码的情况

二、创建目录时中文为乱码的情况

三、当引用的图片为中文时,在页面中显示为红叉的情况

这种乱码情况,就我目前的感觉而言是Fckeditor的Bug,不是我们有没有配置正确的问题了,要想解决以上三个问题,需要我们修改Fckeditor的源码。

对于问题1和2我们可以把它用一个方法解决掉,使用UUID(此类位于java.util.UUID,不明白的可以查API)解决掉此问题。思路是把这些上传上来的中文名字进行随机重命名英文字符串,这样就不存在中文问题了。

由于我们无法直接修改FckEditor,所以需要我们重写ConnectorServlet这个Servlet文件,我们在我们的项目里面新建一个Class文件,命名为ConnectorServle t,直接把net.fckeditor. connector.ConnectorServlet的内容copy过来。另外需要修改web.xml文件把servlet的指向定位到我们自己重写的Servlet

假如我们把我们新建的ConnectorServlet放在包test.fckeditor下面,则WEB.XML需要把:

net.fckeditor.connector.ConnectorServlet

改成

test.fckeditor.ConnectorServlet

其他保持不变就即可!

在我们copy后会出现一个报错,说是Messages这个找不到,我们使用Eclipse的修复功能导入net.fckeditor.connector.Messages这个包就可以了。

下面我们开始修改这个Servlet,解决我们上述的三个中文乱码问题。

第一个问题:找到doPost方法中的try...catch语句块。在try前面增加这么一行语句:upload.setHeaderEncoding("UTF-8");

在这里我们对于这个upload进行编码,解决中文问题。到这里对于项目进行重新布署就会发现再上传中文名字的图片就不会显示为乱码了。

第二个问题:找到doGet方法中的

String newFolderStr = UtilsFile.sanitizeFolderName(request

.getParameter("NewFolderName"));

修改为:

String tempStr = request.getParameter("NewFolderName");

tempStr = new String(tempStr.getBytes("iso8859-1"),"utf-8");

String newFolderStr = UtilsFile.sanitizeFolderName(tempStr);

在原来的代码中没有对rerquest的数据进行重新编码,所以遇到中文就会出现乱码!

第三个问题:其实有两种解决方法,一是修改服务器的URL编码,但是修改服务器的话,在我们自己的电脑上比较方便,如果是我们要放到自己买的空间中就不容易了。另外如果修改了服务器的编码,可能影响到其它项目。所以这种方法就不写了

二是我们使用UUID对上传的文件进行重命名成英文字条串。

找到doPost中的try语句块中的第一个if 即:

if (!ExtensionsHandler.isAllowed(resourceType, extension))

ur = new UploadResponse(UploadResponse.SC_INV ALID_EXTENSION);

在这段代码前面添加下面的一行语句:

filename = UUID.randomUUID().toString()+"."+extension; //extension为扩展名,在上文中得到的

这样我们的三个问题都解决了。如果我们做了第三步,那第一个修改也就没有什么作用了,所以使用的话,只进行二三步就OK了。

八、Fckeditor类说明

引用方法:

如上面内容所示,通过新建一个Fckeditor对象,然后调用该对象的设置方法来设置Fckeditor的各个属性,最后调用Fckeditor的ReplaceTextarea()替换HTML页面中的