Fckeditor 资料整理(java版)

xiaoxiao2022-06-12  44

以下内容为收集整理:==========================

javascript调用方式:------------------------------------

<script type="text/javascript" src="FCKeditor/fckeditor.js"></script><textarea name="content" cols="80″ rows="4″></textarea><script type="text/javascript">var oFCKeditor = new FCKeditor("content");oFCKeditor.BasePath = "FCKeditor/";oFCKeditor.Height = 400;oFCKeditor.ToolbarSet = "Default";oFCKeditor.ReplaceTextarea();</script>

------------------------------------

如果想要使用从数据库读来的文本数据或者是后台来自文件的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/filemanager/browser/default/connectors/下的所有文件删除5.还可以将editor/skins目录下的皮肤文件删除,只留下default一套皮肤(如果你不需要换皮肤的话)6.还可以将editor/lang目录下文件删除,只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js文件7.如果你是使用javascrīpt来调用加载FCKeditor,那么就不需要在web.xml中配置fckeditor的tag文件。8.还有一个问题刚开始使用FCKeditor的人常会遇到就怎么控制它的toolbar的大小和元素排列,其实很简单。在fckconfig.js中用这样的标签[]来划分每行的元素的多少,这样就可以控制toolbar的长短和大小了,具体示例参看:fckconfig.js中的toolbarset[”Default”]

====================================

用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中两个私有方法:getFolders 和 getFiles

让它去你指定的地方得到文件列表即可,这样你的文件可以放在任何你指定目录下。多说一句,很多人都想知道个人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裁剪。-------------------------------------

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没关系的!

======================================

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

即在编辑器域内可以使用Tab键。

如果你的编辑器还用在网站前台的话,比如说用于留言本或是日记回复时,那就不得不考虑安全了,在前台千万不要使用Default的toolbar,要么自定义一下功能,要么就用系统已经定义好的Basic,也就是基本的toolbar,找到:--------------------------------------FCKConfig.ToolbarSets[”Basic”] = [[’Bold’,'Italic’,'-’,'OrderedList’,'UnorderedList’,'-’,/*’Link’,*/’Unlink’,'-’,'Style’,'FontSize’,'TextColor’,'BGColor’,'-’,‘Smiley’,'SpecialChar’,'Replace’,'Preview’] ];

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

FCKConfig.ContextMenu = [’Generic’,/*’Link’,*/’Anchor’,/*’Image’,*/’Flash’,'Select’,'Textarea’,'Checkbox’,'Radio’,'TextField’,'HiddenField’,/*’ImageButton’,*/’Button’,'BulletedList’,'NumberedList’,'TableCell’,'Table’,'Form’];

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

找到: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’;

添加文件 /TestFCKeditor/test.jsp:----------------------------------------<%@ page language=”java” import=”com.fredck.FCKeditor.*” %><%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %><script type=”text/javascript” src=”/TestFCKeditor/FCKeditor/fckeditor.js”></script>

<%–三种方法调用FCKeditor1.FCKeditor自定义标签 (必须加头文件 <%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %> )2.script脚本语言调用 (必须引用 脚本文件 <script type=”text/javascript” src=”/TestFCKeditor/FCKeditor/fckeditor.js”></script> )3.FCKeditor API 调用 (必须加头文件 <%@ page language=”java” import=”com.fredck.FCKeditor.*” %> )–%>

<%–<form action=”show.jsp” method=”post” target=”_blank”>     <FCK:editor id=”content” basePath=”/TestFCKeditor/FCKeditor/”         width=”700″ height=”500″ skinPath=”/TestFCKeditor/FCKeditor/editor/skins/silver/”         toolbarSet = “Default”>         内容     </FCK:editor>     <input type=”submit” value=”Submit”></form>–%>

<form action=”show.jsp” method=”post” target=”_blank”>     <table border=”0″ width=”700″>       <tr>       <td>         <textarea id=”content” name=”content” style=”WIDTH: 100%; HEIGHT: 400px”>input</textarea>         <script type=”text/javascript”>               var oFCKeditor = new FCKeditor(’content̵ ;               oFCKeditor.BasePath = “/TestFCKeditor/FCKeditor/” ;               oFCKeditor.Height = 400;               oFCKeditor.ToolbarSet = “Default” ;               oFCKeditor.ReplaceTextarea();         </script>         <input type=”submit” value=”Submit”>       </td>       </tr>     </table></form>

<%–<form action=”show.jsp” method=”post” target=”_blank”><

转载请注明原文地址: https://www.6miu.com/read-4933124.html

最新回复(0)