WebBuild

FCKeditor 使用指南及 JavaScript 调用

作者:parno 日期:2007-06-26

字体大小: 小中大

JavaScript 调用方式：
__________________________________________________

__________________________________________________

如果想要使用从数据库读来的文本数据或者是后台来自文件的 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

/UserFiles/

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

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

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:
__________________________________________________
<%@ 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.*" %>
%>

<%

input</textarea><br/>        <script type="text/javascript"><br/>              var FCKeditor = new FCKeditor('content')<br/>              oFCKeditor.BasePath = "/TestFCKeditor/FCKeditor/" ; <br/>              oFCKeditor.Height = 400; <br/>              oFCKeditor.ToolbarSet = "Default" ; <br/>              oFCKeditor.ReplaceTextarea(); <br/>        </script><br/>        <input type="submit" value="Submit"><br/>        </td><br/>      </tr><br/>    </table>-<br/></form><br/><br/><%<br/><form action="show.jsp" method="post" target="_blank"><br/>FCKeditor oFCKeditor ; <br/>oFCKeditor = new FCKeditor( request, "content" ) ; <br/>oFCKeditor.setBasePath( "/TestFCKeditor/FCKeditor/" ) ; <br/>oFCKeditor.setValue( "input" ); <br/>out.println( oFCKeditor.create() ) ; <br/><br><br/><input type="submit" value="Submit"><br/></form><br/>%><br/><br/>添加文件/TestFCKeditor/show.jsp<br/><%<br/>String content = request.getParameter("content"); <br/>out.print(content); <br/>%><br/><br/>====================================<br/><br/>1、适时打开编辑器<br/>__________________________________________________<br/>很多时候，我们在打开页面的时候不需要直接打开编辑器，而在用到的时候才打开，这样一来有很好的用户体验，另一方面可以消除FCK在加载时对页面打开速度的影响，点击"Open Editor"按钮后才打开编辑器界面。<br/><br/>实现原理：<br/>使用JAVASCRIPT版的FCK，在页面加载时（未打开FCK），创建一个隐藏的TextArea域，这个TextArea 的name和ID要和创建的FCK实例名称一致，然后点击"Open Editor"按钮时，通过调用一段函数，使用FCK的ReplaceTextarea()方法来创建FCKeditor，代码如下：<br/>__________________________________________________<br/><script type="text/javascript"><br/><!–<br/>function showFCK(){<br/>  var FCKeditor = new FCKeditor( 'fbContent' ) ; <br/>  oFCKeditor.BasePath = '/FCKeditor/' ; <br/>  oFCKeditor.ToolbarSet = 'Basic' ; <br/>  oFCKeditor.Width = '100%' ; <br/>  oFCKeditor.Height = '200' ; <br/>  oFCKeditor.ReplaceTextarea() ; <br/>}<br/><br/></script><br/><textarea name="fbContent" id="fbContent">

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要在同一个页面里用多个编辑器的话，得一个个创建，现在有了这个外联功能，就不用那么麻烦了，只需要把工具条放在一个适当的位置，后面就可以无限制的创建编辑域了。

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

，然后再根据这个容器的id属性进行设置。

JAVASCRIPT实现代码：
__________________________________________________

FCKeditor 1:

FCKeditor 2:

__________________________________________________
此部分的详细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版本：
__________________________________________________

__________________________________________________

在按钮旁边加文字
__________________________________________________
打开 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（翻译整理）
原文地址：http://wiki.fckeditor.net/Developer%27s_Guide/Javascript_API
__________________________________________________
FCK 编辑器加载后，将会注册一个全局的 FCKeditorAPI 对象。

FCKeditorAPI 对象在页面加载期间是无效的，直到页面加载完成。如果需要交互式地知道 FCK 编辑器已经加载完成，可使用"FCKeditor_OnComplete"函数。

在当前页获得 FCK 编辑器实例：
var Editor = FCKeditorAPI.GetInstance('InstanceName');

从 FCK 编辑器的弹出窗口中获得 FCK 编辑器实例：
var Editor = window.parent.InnerDialogLoaded().FCK;

从框架页面的子框架中获得其它子框架的 FCK 编辑器实例：
var Editor = window.FrameName.FCKeditorAPI.GetInstance('InstanceName');

从页面弹出窗口中获得父窗口的 FCK 编辑器实例：
var Editor = opener.FCKeditorAPI.GetInstance('InstanceName');

获得 FCK 编辑器的内容：
oEditor.GetXHTML(formatted);  // formatted 为：true|false，表示是否按HTML格式取出
也可用：
oEditor.GetXHTML();

设置 FCK 编辑器的内容：
oEditor.SetHTML("content", false);  // 第二个参数为：true|false，是否以所见即所得方式设置其内容。此方法常用于"设置初始值"或"表单重置"哦作。

插入内容到 FCK 编辑器：
oEditor.InsertHtml("html");  // "html"为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();
__________________________________________________

引用内容