FCK编辑器（完整详解）

url: http://ckeditor.com

demo: http://ckeditor.com/demo

 

一直都没找到完整的Fck编辑器的完整详解，今天无意中发现了，所以就复制下来了；

javascript调用方式：

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

<script. type=”text/javascript” src=”FCKeditor/fckeditor.js”></scrīpt>

<textarea name=”content” cols=”80″ rows=”4″>

</textarea>

<script. type=”text/javascript”>

var FCKeditor = 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’,'-’,’Unlink’,'-’,'Style’,'FontSize’,'TextColor’,'BGColor’,'-’,

‘Smiley’,'SpecialChar’,'Replace’,'Preview’] ];

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

FCKConfig.ContextMenu = [’Generic’,’Anchor’,’Flash’,'Select’,'Textarea’,'Checkbox’,'Radio’,'TextField’,'HiddenField’,

’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 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 FCKeditor = 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”>

<%

FCKeditor oFCKeditor ;

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

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

oFCKeditor.setValue( “input” );

out.println( oFCKeditor.create() ) ;

%>

<br>

<input type=”submit” value=”Submit”>

</form>

–%>

添加文件/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，代码如下：

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

<script. type=”text/javascript”>

<!–

function showFCK(){

var FCKeditor = new FCKeditor( ‘fbContent’ ) ;

oFCKeditor.BasePath = ‘/FCKeditor/’ ;

oFCKeditor.ToolbarSet = ‘Basic’ ;

oFCKeditor.Width = ‘100%’ ;

oFCKeditor.Height = ‘200′ ;

oFCKeditor.ReplaceTextarea() ;

}

//–>

</script>

<textarea name=”fbContent” id=”fbContent”></textarea>

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

要实现这种功能呢，需要先在页面中定义一个工具条的容器：<div id=”xToolbar”></div>，然后再根据这个容器的id属性进行设置。

JAVASCRIPT实现代码：

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

<div id=”xToolbar”></div>

FCKeditor 1:

<script. type=”text/javascript”>

<!–

// 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 FCKeditor = new FCKeditor( ‘FCKeditor_1′ );

oFCKeditor.BasePath = sBasePath;

oFCKeditor.Height = 100;

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

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

oFCKeditor.Create();

//–>

</script>

<br />

FCKeditor 2:

<script. type=”text/javascript”>

<!–

FCKeditor = new FCKeditor( ‘FCKeditor_2′ );

oFCKeditor.BasePath = sBasePath;

oFCKeditor.Height = 100;

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

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

oFCKeditor.Create();

//–>

</script>

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

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

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

<script. type=”text/javascript”>

var FCKeditor = new FCKeditor( ‘fbContent’ );

<% if power = powercode then %>

oFCKeditor.Config[’LinkBrowser’] = true;

oFCKeditor.Config[’ImageBrowser’] = true;

oFCKeditor.Config[’FlashBrowser’] = true;

oFCKeditor.Config[’LinkUpload’] = true;

oFCKeditor.Config[’ImageUpload’] = true;

oFCKeditor.Config[’FlashUpload’] = true;

<% end if %>

oFCKeditor.ToolbarSet = ‘Basic’;

oFCKeditor.Width = ‘100%’;

oFCKeditor.Height = ‘200′;

oFCKeditor.Value = ‘’;

oFCKeditor.Create();

</script>

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

在按钮旁边加文字

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

打开 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定义：

<?xml version=”1.0″ encoding=”utf-8″ ?>

<Styles>

<Style name=”Image on Left” element=”img”>

<Attribute name=”style” value=”padding: 5px; margin-right: 5px” />

<Attribute name=”border” value=”2″ />

<Attribute name=”align” value=”left” />

</Style>

<Style name=”Image on Right” element=”img”>

<Attribute name=”style” value=”padding: 5px; margin-left: 5px” />

<Attribute name=”border” value=”2″ />

<Attribute name=”align” value=”right” />

</Style>

<Style name=”Custom Bold” element=”span”>

<Attribute name=”style” value=”font-weight: bold;” />

</Style>

<Style name=”Custom Italic” element=”em” />

<Style name=”Title” element=”span”>

<Attribute name=”class” value=”Title” />

</Style>

<Style name=”Code” element=”span”>

<Attribute name=”class” value=”Code” />

</Style>

<Style name=”Title H3″ element=”h3″ />

<Style name=”Custom Ruler” element=”hr”>

<Attribute name=”size” value=”1″ />

<Attribute name=”color” value=”#ff0000″ />

</Style>

</Styles>

每一个<style>将来会生成一个样式的菜单项。name名称就是显示在菜单里的文字；element定义了该样式可以应用在那种html标签上，<Attribute>的 name 指定了将会修改标签的哪个属性来应用样式，value则是修改成的值。

看这个：

<Style name=”Title” element=”span”>

<Attribute name=”class” value=”Title” />

</Style>

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

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

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

FCKeditor JavaScript. API（翻译整理）

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

FCK 编辑器加载后，将会注册一个全局的 FCKeditorAPI 对象。

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

<script. type=”text/javascript”>

function FCKeditor_OnComplete(editorInstance) {

FCKeditorAPI.GetInstance(’FCKeditor1′).Commands.GetCommand(’FitWindow’).Execute();

}

</script>

在当前页获得 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();

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