fck java_fck资料整理（java）

javascript调用方式：

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

var oFCKeditor = new FCKeditor("content");

oFCKeditor.BasePath = "FCKeditor/";

oFCKeditor.Height = 400;

oFCKeditor.ToolbarSet = "Default";

oFCKeditor.ReplaceTextarea();

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

如果想要使用从数据库读来的文本数据或者是后台来自文件的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.如果你是使用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中的配置选项：

baseDir

/UserFiles/

意思是在浏览服务器上的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中的这个配置参数来判断，配置如下：

resourcePath

/fileSystem/

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中对应红色文字的位置，如下：

Connector

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

别忘了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:

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

三种方法调用FCKeditor

1.FCKeditor自定义标签 (必须加头文件 )

2.script脚本语言调用 (必须引用 脚本文件 )

3.FCKeditor API 调用 (必须加头文件 )

–%>

width=”700″ height=”500″ skinPath=”/TestFCKeditor/FCKeditor/editor/skins/silver/”

toolbarSet = “Default”>

内容

–%>

input var oFCKeditor = new FCKeditor(’content̵ ; oFCKeditor.BasePath = “/TestFCKeditor/FCKeditor/” ; oFCKeditor.Height = 400; oFCKeditor.ToolbarSet = “Default” ; oFCKeditor.ReplaceTextarea();

FCKeditor oFCKeditor ;

oFCKeditor = new FCKeditor( request, “content” ) ;

oFCKeditor.setBasePath( “/TestFCKeditor/FCKeditor/” ) ;

oFCKeditor.setValue( “input” );

out.println( oFCKeditor.create() ) ;

%>

–%>

添加文件/TestFCKeditor/show.jsp:

String content = request.getParameter(”content”);

out.print(content);

%>

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

1、适时打开编辑器

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

很多时候，我们在打开页面的时候不需要直接打开编辑器，而在用到的时候才打开，这样一来有很好的用户体验，另一方面可以消除FCK在加载时对页面打开速度的影响，点击“Open Editor”按钮后才打开编辑器界面。

实现原理：

使用JAVASCRIPT版的FCK，在页面加载时(未打开FCK)，创建一个隐藏的TextArea域，这个TextArea

的name和ID要和创建的FCK实例名称一致，然后点击”Open Editor”按钮时，通过调用一段函数，使用

FCK的ReplaceTextarea()方法来创建FCKeditor，代码如下：

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

function showFCK(){

var oFCKeditor = new FCKeditor( ‘fbContent’ ) ;

oFCKeditor.BasePath = ‘/FCKeditor/’ ;

oFCKeditor.ToolbarSet = ‘Basic’ ;

oFCKeditor.Width = ‘100%’ ;

oFCKeditor.Height = ‘200′ ;

oFCKeditor.ReplaceTextarea() ;

}

//–>

2、使用FCKeditor 的 API

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

FCKeditor编辑器，提供了非常丰富的API，用于给End User实现很多想要定制的功能，比如最基本的数据验证，如何在提交的时候用JS判断当前编辑器区域内是否有内容，FCK的API提供了GetLength()方法；

再比如如何通过脚本向FCK里插入内容，使用InsertHTML()等；

还有，在用户定制功能时，中间步骤可能要执行FCK的一些内嵌操作，那就用ExecuteCommand()方法。

详细的API列表，请查看FCKeditor的Wiki。而常用的API，请查看FCK压缩包里的_samples/html/sample08.html。此处就不贴代码了。

3、外联编辑条(多个编辑域共用一个编辑条)

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

这个功能是2.3版本才开始提供的，以前版本的FCKeditor要在同一个页面里用多个编辑器的话，得一个个创建，现在有了这个外联功能，就不用那么麻烦了，只需要把工具条放在一个适当的位置，后面就可以无限制的创建编辑域了。

要实现这种功能呢，需要先在页面中定义一个工具条的容器：

JAVASCRIPT实现代码：

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

FCKeditor 1:

// Automatically calculates the editor base path based on the _samples directory.

// This is usefull only for these samples. A real application should use something like this:

// oFCKeditor.BasePath = ‘/fckeditor/’; // ‘/fckeditor/’ is the default value.

var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf(’_samples’));

var oFCKeditor = new FCKeditor( ‘FCKeditor_1′ );

oFCKeditor.BasePath = sBasePath;

oFCKeditor.Height = 100;

oFCKeditor.Config[ ‘ToolbarLocation’ ] = ‘Out:parent(xToolbar)’;

oFCKeditor.Value = ‘This is some sample text. You are using FCKeditor.’;

oFCKeditor.Create();

//–>

FCKeditor 2:

oFCKeditor = new FCKeditor( ‘FCKeditor_2′ );

oFCKeditor.BasePath = sBasePath;

oFCKeditor.Height = 100;

oFCKeditor.Config[ ‘ToolbarLocation’ ] = ‘Out:parent(xToolbar)’;

oFCKeditor.Value = ‘This is some sample text. You are using FCKeditor.’;

oFCKeditor.Create();

//–>

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

此部分的详细DEMO请参照_samples/html/sample11.html，_samples/html/sample11_frame.html

4、文件管理功能、文件上传的权限问题

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

一直以来FCKeditor的文件管理部分的安全是个值得注意，但很多人没注意到的地方，虽然FCKeditor在各个Release版本中一直存在的一个功能就是对上传文件类型进行过滤，但是她没考虑过另一个问题：到底允许谁能上传？到底谁能浏览服务器文件？

之前刚开始用FCKeditor时，我就出现过这个问题，还好NetRube(FCKeditor中文化以及FCKeditor ASP版上传程序的作者)及时提醒了我，做法是去修改FCK上传程序，在里面进行权限判断，并且再在fckconfig.js里把相应的一些功能去掉。但 随之FCK版本的不断升级，每升一次都要去改一次配置程序fckconfig.js，我发觉厌烦了，就没什么办法能更好的控制这种配置么？事实上，是有 的。

在fckconfig.js里面，有关于是否打开上传和浏览服务器的设置，在创建FCKeditor时，通过程序来判断是否创建有上传浏览功能的编辑器。首先，我先在fckconfig.js里面把所有的上传和浏览设置全设为false，接着我使用的代码如下：

JAVASCRIPT版本：

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

var oFCKeditor = new FCKeditor( ‘fbContent’ );

oFCKeditor.Config[’LinkBrowser’] = true;

oFCKeditor.Config[’ImageBrowser’] = true;

oFCKeditor.Config[’FlashBrowser’] = true;

oFCKeditor.Config[’LinkUpload’] = true;

oFCKeditor.Config[’ImageUpload’] = true;

oFCKeditor.Config[’FlashUpload’] = true;

oFCKeditor.ToolbarSet = ‘Basic’;

oFCKeditor.Width = ‘100%’;

oFCKeditor.Height = ‘200′;

oFCKeditor.Value = ‘’;

oFCKeditor.Create();

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

在按钮旁边加文字

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

打开 editor/js/ 两个js文件

fckeditorcode_gecko.js

fckeditorcode_ie.js

第一个是支持非ie浏览器的

第二个文件是支持ie浏览器的

搜索 FCKToolbarButton，可以看到许多类似这样的语句：

case ‘Save’:B = new FCKToolbarButton(’Save’, FCKLang.Save, null, null, true, null, 3); break;

‘Save’是按钮英文名字

FCKToolbarButton 的四个参数分别是：

按钮命令名称，按钮标签文字，按钮工具提示，按钮样式，按钮是否在源代码模式可见，按钮下拉菜单其中将第4项参数设置为 FCK_TOOLBARITEM_ICONTEXT 即可使按钮旁边出现文字，注意没有引号。

例如：

case ‘Preview’:B = new FCKToolbarButton(’Preview’, FCKLang.Preview, null, FCK_TOOLBARITEM_ICONTEXT, true, null, 5);

这样我们就可以将 我们经常用的3种模式源代码、预览、全屏编辑按钮都加上文字了。

解释fck样式的工作原理

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

fck的样式设置涉及到了两个文件，一个是你定义好的样式表文件.css，另一个是告诉fck样式表如何使用的xml文件，两个文件确一不可。

css文件的位置是不做要求的，但是需要你在应用的编辑器的页面上插入样式表文件的链接。这样才能显示出来样式。

fckstyles.xml 在与editor目录同级的目录下。该文件定义了那些样式可以使用在那些标签里面。

这就是fck自带的样式xml定义：

每一个

看这个：

如果你在fck选定了文字 “经典论坛 》 前台制作与脚本专栏 》 FCKeditor 实战技巧 - 1 》 编辑帖子” 应用该样式 则原来文字就会变成经典论坛 》 前台制作与脚本专栏 》 FCKeditor 实战技巧 - 1 》 编辑帖子

注意：如果编辑器呈整页编辑状态，那么整页里面也需要插入样式表链接才能显示出来样式。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

FCKeditor JavaScript API(翻译整理)