posts - 0, comments - 77, trackbacks - 0, articles - 356
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

Java/jsp中集成FCKeditor使用

Posted on 2007-05-16 15:33 semovy 阅读(6371) 评论(5)  编辑  收藏 所属分类: JavaScriptJSPJAVA应用
2007/4/1

Java/jsp中集成FCKeditor使用

最近一直在搞FCKeditor在线文本编辑器的裁剪和集成,总结了自己的一些

心得体会,跟大家分享一下自己的经验!

1.jsp/java中引用FCKeditor步骤和具体做法,参见如下的链接:

  a.jsp页面集成调用说明;   b.后台浏览和上传功能集成指南

注意点:配置好jsp页面集成FCKeditor的javascrīpt调用以后,页面将会

显示如下的样子:

 【文本编辑器样式】

页面上相应的代码如下:

<scrīpt type="text/javascrīpt" src="FCKeditor/fckeditor.js"></scrīpt>

<textarea name="content" cols="80" rows="4">
</textarea>
<scrīpt type="text/javascrīpt">
  var ōFCKeditor = new FCKeditor('content') ;
  oFCKeditor.BasePath = "FCKeditor/";
  oFCKeditor.Height = 400;
  oFCKeditor.ToolbarSet = "Default" ; 
  oFCKeditor.ReplaceTextarea();
</scrīpt>

如果是要想从数据库读来的文本数据或者是后台来自文件的txt/html

文本数据。只要在
<textarea name="content" cols="80" rows="4">
</textarea>

中加入自己的显示内容的formbean对应字段即可

<textarea name="content" cols="80" rows="4">

<c:out value="${ contentData}" />
</textarea>

这样内容就会被显示在FCKeditor编辑框中了,点击提交按钮以后就可以

在后台的相应java action中得到content参数中的内容就是页面上

FCKeditor中的内容数据了。可以在struts/jsf做使用的哦。

要提醒一点的是由于你给FCKeditor瘦身,所以常会报缺少对象支持

等错误,只要在FCKeditor/editor/lang中加上相应的js语言文件即可

如果加载页面失败(FCKeditor未定义)还有一个可能就是引用

FCKeditor/fckeditor.js文件路径不对!关于FCKeditor瘦身可以

参考网上文章,我还是摘一些要点从网上:

1、将FCKeditor目录下及子目录下所有以”_”下划线开

头的文件夹删除


2.FCKeditor根目录下只保留fckconfig.js, 

fckeditor.js, fckstyles.xml, fcktemplates.xml

其余全部删除


3.将editor/filemanager/upload目录下文件及文件夹

清空.


4.还可以将editor/skins目录下的皮肤文件删除,只留下

default一套皮肤(如果你不需要换皮肤的话)


5.还可以将editor/lang目录下文件删除,只保留

en.js, fcklanguagemanager.js, zh-cn.js, zh.js

文件

6.如果你是使用javascrīpt来调用加载FCKeditor,那么

就不需要在web.xml中配置fckeditor的tag文件。

7.还有一个问题刚开始使用FCKeditor的人常会遇到

就怎么控制它的toolbar的大小和元素排列,其实很简单。

在fckconfig.js中用使用这样的标签[]来划分每行的

元素的多少,这样就可以控制toolbar的长短和大小了,

具体示例参看:fckconfig.js中的toolbarset

["Default"]

2.下面再说说fckconfig.js中的一些选项来控制toolbarset中的控件

的功能,实现功能裁剪:

1):取消超链接中的浏览服务器和上传功能,方法如下:

FCKConfig.LinkBrowser = true ;

FCKConfig.LinkUpload = true ;

改为

FCKConfig.LinkBrowser = false ;

FCKConfig.LinkUpload = false ;

2):取消图片链接中的浏览服务器和上传功能,方法如下:

FCKConfig.ImageUpload = true ;

FCKConfig.ImageBrowser = true ;

改为

FCKConfig.ImageUpload = false ;

FCKConfig.ImageBrowser = false ;

3):Dlg Button中取消高级功能,方法如下:

FCKConfig.LinkDlgHideAdvanced = false ;

FCKConfig.ImageDlgHideAdvanced = false ;

改为

FCKConfig.ImageDlgHideAdvanced = true ;

FCKConfig.LinkDlgHideTarget  = true ;

下一篇介绍FCKeditor的上传和浏览服务器功能,以及如何在里面实现动态

超连接,转发到servlet经过filter以后去调用服务器的action

如何实现对应用户浏览自己的图片的列表实现!

 

FCKeditor集成java servlet可以实现文件的上传和服务器端列表读取功

能FCKeditor自己提供了两个servlet来分别实现上传文件功能,和读取服

务器端文件列表功能,这两个servlet分别为:

com.fredck.FCKeditor.connector.ConnectorServlet(读取文件列

表)com.fredck.FCKeditor.uploader.SimpleUploaderServlet(实

文件上传)

1.浏览服务器端文件列表

web.xml文件中,比如ConnectorServlet中配置选项:

<init-param>
   <param-name>baseDir</param-name>
   <param-value>/UserFiles/</param-value>
  </init-param>

意思在浏览服务器上的baseDir配置指定里面的所有文件极其目录结构列表

如果你的baseDir没有配置,Connector将会自动创建一个默认的文件夹

userFiles,对应的ConnectorServlet中init()方法中代码如下:

baseDir=getInitParameter("baseDir");
if(baseDir==null)
   baseDir="/UserFiles/";

还想说一下的是,FCKeditor的client调用server的servlet方法采用

的是Ajax思想来实现。当你点击浏览服务器(browser server)的时候

就会触发一个异步的javascrīpt + xmlhttp的调用响应,后台的servlet

会去完成你要请求的事件,然后数据以xml方式返回给client来解析。

很明显,你要实现去数据库或者其他的文件系统请求列表,你只要修改

ConnectorServlet中两个私有方法:getFoldersgetFiles

让它去你指定的地方得到文件列表即可,这样你的文件可以放在任何你

指定目录下。多说一句,很多人都想知道个人blog系统中怎么实现上传

文件以后对应用户浏览自己的列表的,我的做法很简单,建立你用户名

的文件夹,你上传只能上传到你的目录夹,浏览可以通过程序指定浏览

对应用户下的文件夹即可,这个时候你要修改Connectorservlet中的

路径即可!

2.超连接重定位问题

FCKeditor可以插入超连接,实现对文件的预览功能,只要我们稍微改变

我们可以使FCKeditor编辑器支持对任意文件系统下的任意文件的客户端

浏览和下载保存!FCKeditor本来提供的是相对URL超连接,只要我们修改

ConnectorServlet中传递给客户端的地址的时候,把它改写成绝对URL

然后再通过我们自己的filter的servlet实现重定向去一个下载/浏览

文件的struts的action方法就可以实现在客户端对超连接文件的下载和

浏览!说一下具体做法吧:

1):修改ConnectorServlet传递给客户端javascrīpt的路径,代码如下

String currentUrl= "http://" + request.getserver +request.getServerPort + request.getContextPath +resourcePath;

以上代码请在ConnectorServlet的doGet()里面拼装!在

调用CreateCommonXml()私有方法的时候参数传入

myEl.setAttribute("path",currentPath);
myEl.setAttribute("url",currentUrl);

提醒一下resourcePath为在web.xml配置文件中ConnectorServlet中

的一个初始化参数配置,等一下利用filter实现对超连接的重定位就提取

URL中的这个配置参数来判断,配置如下:

<init-param>
   <param-name>resourcePath</param-name>
   <param-value>/fileSystem/</param-value>
</init-param>

2):建立你的filter servlet,实现对URL的截获,对符合要求的

URL进行重定位到你的对应action中去即可

3):实现你的对应action来实现文件的上传和下载功能即可!

4):扩展功能-实现对URL的加密,对连接的URL中加上一串字符,最后

几位作为算法校验,对不符合要求的URL连接,filter将会拒绝重定位到

指定action。此外利用自己写的扩展类还可以实现对超连接的文件类型

进行限制,比如你只能超连接JPG|GIF|DOC|TXT|HTML等几种后缀名的

文件,对其他文件即使你指定超连接也让你浏览和下载,这些都可以在

web.xml中通过修改对应servlet的配置文件的初始化参数实现。

3.页面javascrīpt修改

浏览服务器的功能对应的html/javascrīpt相关的文件为:browser.html

和frmresourcelist.html对应你想传递的信息你可以append在文件名的

字符串后面,在GetFileRowHtml()的javascrīpt函数中实现对文件

名的截取,这样client只会显示文件名,而你可以得到文件的数据库唯一

标识,任何你想要的信息你都可以通过修改ConnectorServlet中的私有

方法getFiles()来实现,只要修改页面frmresurcelist.html中的

GetFileRowHtml()中传入变量fileName即可。你还可以在点击选中

文件的时候实现一个你自己的Ajax调用,一切取决你的项目需要!

4.我不是一个javascrīpt高手,其实如果我对javascrīpt了解多一些

也许对客户端的代码修改以后做出更眩的功能。可以更好的完成对

FCKeditor裁剪。我还发现一个问题,就是FCKeditor2.3自己提供的

textarea控件一直不能获得输入焦点,接受文字输入,如果有高手知道

怎么修改javascrīpt修复这个bug,请也回复我!

 

5.注意点

无论怎么修改别人的东西,请一定尊重开源精神!

很多人配置好了FCKeditor的上传功能以后常会遇到xmlhttp request

404 error,后面是一串路径,其实就是你的servlet-mapping中的路径

不对,你只要把xmlhttp request errot 404 后面跟的路径,copy到

你的web.xml中对应红色文字的位置,如下:

<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>

/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector

</url-pattern>

</servlet-mapping>

别忘了SimpleUploader的servlet-mapping也要做同样的修改!

还有一个错误就是http 500错误,这个可能是你的URL请求不对,应该和

FCKeditor没关系的!


评论

# re: Java/jsp中集成FCKeditor使用  回复  更多评论   

2008-04-23 19:34 by wangking
FCKConfig.FlashUpload = true
能上传flash文件,也可以改。
不过这样改了后,自己想用完整的功能也不能了。还是,选择另外一种方法好。把前台和后台分开。
在FCKConfig.ToolbarSets["Default"]下加一个自己调好的,去年了危险的功能。如上面所说的这些。
//取消了图像、flash、链接等有上传的几个项。
//如果不取消源代码,那么,在源代码中输入<img>后,回来,用鼠标右键点击时,还是会有图像的选项,而且有上传项。
FCKConfig.ToolbarSets["my"] = [
['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
['OrderedList','UnorderedList','-','Outdent','Indent'],
['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
['Unlink'],
['Table','Rule','Smiley','SpecialChar'],


['PasteText','PasteWord'],
['Undo','Redo','RemoveFormat'],
['Preview'],
'/',

['Style','FontFormat','FontName','FontSize'],
['TextColor','BGColor'],
['FitWindow','ShowBlocks'] // No comma for the last row.
] ;
这样,在网站的前台,就调用这个my,后台就调用完整的Default。它自己也有一个节省的功能Basic,你自己修改修改也能用。

# re: Java/jsp中集成FCKeditor使用  回复  更多评论   

2013-08-26 17:22 by 张海丰
我的代表<k:textarea property="content" styleId="editContent" rows="15" cols="80" validateRules="{maxLength:500}"/>
要怎么引用到
var ōFCKeditor = new FCKeditor('content') ;
oFCKeditor.BasePath = "FCKeditor/";
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = "Default" ;
oFCKeditor.ReplaceTextarea();
求解!

# re: Java/jsp中集成FCKeditor使用  回复  更多评论   

2014-10-21 17:37 by asd
234567890

# re: Java/jsp中集成FCKeditor使用  回复  更多评论   

2015-11-02 14:32 by
是是

# re: Java/jsp中集成FCKeditor使用  回复  更多评论   

2016-01-20 14:50 by td
ybhhbd

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


网站导航: