FCKeditor 使用指南及 JavaScript 调用
作者:parno 日期:2007-06-26
__________________________________________________
__________________________________________________
如果想要使用从数据库读来的文本数据或者是后台来自文件的 txt/html 文本数据。
只要在
__________________________________________________
__________________________________________________
中加入自己的显示内容的 formbean 对应字段即可
__________________________________________________
__________________________________________________
这样内容就会被显示在 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 中的配置选项：
意思是在浏览服务器上的 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 传递给客户端j avascript 的路径，代码如下：
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中的这个配置参数来判断，配置如下
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中对应红色文字的位置，如下：
别忘了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" %>
<%
三种方法调用FCKeditor
1.FCKeditor自定义标签 (必须加头文件 <%@ taglib uri="/TestFCKeditor" prefix="FCK" %> )
2.script脚本语言调用 (必须引用 脚本文件 )
3.FCKeditor API 调用 (必须加头文件 <%@ page language="java" import="com.fredck.FCKeditor.*" %>
%>
<%