http://www.cnblogs.com/xiaopeng84/archive/2010/08/03/1790911.html

javascript调用方式:
------------------------------------
<script type="text/javascript" src="FCKeditor/fckeditor.js"></script>

<textarea name="content" cols="80" rows="4">
</textarea>
<script type="text/javascript">
var FCKeditor = new FCKeditor("content");
FCKeditor.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.如果你是使用javascript来调用加载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)的时候就会触发一个异步的javascript + xmlhttp的调用响应,后台的servlet会去完成你要请求的事件,然后数据以xml方式返回给client来解析。很明显,你要实现去数据库或者其他的文件系统请求列表,你只要修改
ConnectorServlet中两个私有方法:getFolders 和 getFiles
让它去你指定的地方得到文件列表即可,这样你的文件可以放在任何你指定目录下。多说一句,很多人都想知道个人blog系统中怎么实现上传文件以后对应用户浏览自己的列表的,我的做法很简单,建立你用户名的文件夹,你上传只能上传到你的目录夹,浏览可以通过程序指定浏览对应用户下的文件夹即可,这个时候你要修改Connectorservlet中的路径即可!
------------------------------------

2.超连接重定位问题
------------------------------------
FCKeditor可以插入超连接,实现对文件的预览功能,只要我们稍微改变我们可以使FCKeditor编辑器支持对任意文件系统下的任意文件的客户端浏览和下载保存!FCKeditor本来提供的是相对URL超链接,只要我们修改ConnectorServlet中传递给客户端的地址的时候,把它改写成绝对URL然后再通过我们自己的filter的servlet实现重定向去一个下载/浏览文件的struts的action方法就可以实现在客户端对超连接文件的下载和浏览!说一下具体做法吧:

1):修改ConnectorServlet传递给客户端javascript的路径,代码如下:
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.页面javascript修改
------------------------------------
浏览服务器的功能对应的html/javascript相关的文件为:browser.html和frmresourcelist.html对应你想传递的信息你可以append在文件名的字符串后面,在GetFileRowHtml()的javascript函数中实现对文件名的截取,这样client只会显示文件名,而你可以得到文件的数据库唯一标识,任何你想要的信息你都可以通过修改ConnectorServlet中的私有方法getFiles()来实现,只要修改页面frmresurcelist.html中的GetFileRowHtml()中传入变量fileName即可。你还可以在点击选中文件的时候实现一个你自己的Ajax调用,一切取决你的项目需要!

4.我不是一个javascript高手,其实如果我对javascript了解多一些也许对客户端的代码修改以后做出更眩的功能。可以更好的完成对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>

<%
三种方法调用FCKeditor
1.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 为HTML文本

检查 FCK 编辑器内容是否发生变化:
oEditor.IsDirty();

在 FCK 编辑器之外调用 FCK 编辑器工具条命令:
命令列表如下:
--------------------------------------------
DocProps, Templates, Link, Unlink, Anchor, BulletedList, NumberedList, About, Find, Replace, Image, Flash, SpecialChar, Smiley, Table, TableProp, TableCellProp, UniversalKey, Style, FontName, FontSize, FontFormat, Source, Preview, Save, NewPage, PageBreak, TextColor, BGColor, PasteText, PasteWord, TableInsertRow, TableDeleteRows, TableInsertColumn, TableDeleteColumns, TableInsertCell, TableDeleteCells, TableMergeCells, TableSplitCell, TableDelete, Form, Checkbox, Radio, TextField, Textarea, HiddenField, Button, Select, ImageButton, SpellCheck, FitWindow, Undo, Redo
--------------------------------------------
使用方法如下:
--------------------------------------------
oEditor.Commands.GetCommand('FitWindow').Execute();

相关文章:

  • 2022-01-18
  • 2021-09-27
  • 2021-12-20
  • 2021-12-20
  • 2021-12-05
  • 2021-11-11
  • 2021-09-05
  • 2021-09-12
猜你喜欢
  • 2022-12-23
  • 2021-11-10
  • 2021-11-18
  • 2022-02-12
  • 2022-01-05
  • 2022-02-08
相关资源
相似解决方案