本手册由zengl开源网的站长提供 首页：www.zengl.com 在 FCK压缩包提供的完整版的例子中，我们可以在编辑器中看到四个下拉列表，一个是样式下拉列表，一个是格式下拉列表，还有就是字体和大小这两个下拉...
本手册由zengl开源网的站长提供 首页：www.zengl.com
在 FCK压缩包提供的完整版的例子中，我们可以在编辑器中看到四个下拉列表，一个是样式下拉列表，一个是格式下拉列表，还有就是字体和大小这两个下拉列表。 本章所讲的就是如何自定义样式下拉列表中的样式。在一些cms中 比如 dedecms 里就把样式下拉列表给去掉了，可能他觉得不是很常用吧。
The editor offers complete and powerful support for separating text formatting definitions from the text itself. And even more, it's possible to offer a complete set of predefined formatting definitions to the end-user (writer) so the text can be well designed without messing up the HTML source. 编辑器提供了很强大的对自定义的特定的样式的支持，通过在xml 之类的文件中定义好样式，就可以在编辑器中直接使用，不用到html 源代码中修改，因为毕竟编辑器提供的图标是有限的，默认的样式也是有限的，所以如果想在编辑器中应用自己的样式的话，这种方式就很方便快捷。
To do that, the "Style" toolbar command has been introduced. It shows a complete list of available styles with preview for text styles. 样式下拉列表也因此应运而生。
The list of available styles is completely customizable for your needs. It is based on an XML file. This file can be placed anywhere in your site. You just need to point the editor to the right path using the following configuration setting:
列表中的所有可用的样式都完全可以由自己定义，以满足不同的需要。它基于一个xml 文件。这个文件可以放置到你网站的任何位置。你只需要通过 StylesXmlPath 配置选项 设置好 该文件的路径即可，如下所示：
FCKConfig.StylesXmlPath = '../fckstyles.xml' ;
It is a simple file that describes how to name and apply each style available in the editor. This is a sample:
下面是一个简单的例子用以说明如何定义和实现编辑器中的可用的样式：
<?xml version="1.0" encoding="utf-8" ?>
<Styles >
<Style name="My Image" element="img">
<Attribute name="style" value="padding: 5px" />
<Attribute name="border" value="2" />
</Style >
<Style name="Italic" element="em" />
<Style name="Title" element="span">
<Attribute name="class" value="Title" />
</Style >
<Style name="Title H3" element="h3" />
</Styles>
The above sample shows how to define four styles, one for an "Object" element (in this case for images) and three for text. The editor will show the styles in a context sensitive fashion, so when an image is selected, only the "My Image" style will be available in the list and when text is selected the "Italic", "Title" and "Title H3" will be shown.上面的例子显示了如何定义四个样式，第一个样式是针对 "Object" 对象元素的（在本例中就是针对img 图像元素），其他三个样式是针对文本元素的，当选中 编辑器中编辑的图像时，列表中就只显示针对该元素的样式，本例中就只显示 My Image 样式，当选中文本元素时，样式列表中就会显示 "Italic" , "Title" , "Title H3" 三个样式。这些 "My Image" 之类的都是样式的名称。
The root node of the Styles XML file must be named "Styles". Each style definition must be a child of the root node with a "Style" name. xml样式文件的根节点必须取名为 "Styles" 。每个定义的样式都是该根节点的子节点，并且都取名为"Style"。
The "Style" nodes have two mandatory attributes: style 节点有两个必须的属性：
For example: suppose we have the text "This is a Style Command test" inside the editor and we select “Style Command”. If we apply the "Italic" style the resulting source code will be something like this: 举个例子：假设在编辑器里有行文本，内容是"This is a Style Command test" ，然后我们选中 其中的"Style Command" ，然后在样式下拉列表中选择 "Italic" 样式，那么结果在html 源代码中就会显示如下的结果：即给 "Style Command" 文本应用了斜体的样式，在这里就是在他们左右两边加上了<em> 标签。
This is a <em>Style Command</em> test
So the editor used the "em" tag to apply the style, as defined in the XML file. 这样xml 文件中的 样式就通过 定义的 em 标签应用到了所选择的文本上了。
We can also combine elements and their attributes when applying a style. To do this we can add "Attribute" nodes inside the "Style" node definition. We can add as many attributes as we want. The "Attribute" node has two mandatory attributes:
在前面的xml文件中我们可以看到，第一个 My Image 样式 里面还有个 Attribute 节点，这个节点在应用样式时，可以将选择的元素和相关的属性结合起来，我们可以按需要定义任意多的属性。这个 Attribute节点 有两个必须的属性：
Using the same sample, but instead selecting the “Title” style, the source result should be:举个例子，还是和刚才一样选择"Style Command " 文本内容，然后选择 Title 样式，因为在xml文件的 Title 样式节点中 <Style name="Title" element="span"> 里的element 为 span ，所以下面加上了 span 标签，又因为 该样式节点里所包含的属性节点为 <Attribute name="class" value="Title" /> 所以 在 span 标签中加上了 class="Title" 的属性。如下所示：
This is a <span class="Title">Style Command</span> test
We can also combine many styles over the same selection. So with the above sample, without changing the selection, and applying the "Italic" style, the result should be: 我们可以给所选择的元素 同时加上很多的样式，比如在上面的例子中，我们再选择一个 Italic 样式，那么结果就会是：
This is a <span class="Title"><em>Style Command</em></span> test
The user can remove the applied style by selecting the style name again. 用户可以通过在样式下拉表中再次选择 某个样式就可以去掉该样式。
NOTE:Note: If you want to use your own CSS styles, you will need to point FCKeditor to your stylesheet, otherwise, your styles will not visualise correctly inside the editor. You can do this by setting the EditorAreaCSS property in your config file. e.g. to use CSS styles defined inside "/myownstyles.css" you would need to add: 注意：如果你在自己的CSS 层叠样式表里定义了一个样式，比如上面例子中的 class 为 Title 的样式，你想让编辑器显示出该样式的效果，那么可以通过 EditorAreaCSS配置选项设置 你的CSS文件的路径。如下所示：
FCKConfig.EditorAreaCSS = '/myownstyles.css' ;
The editor is context sensitive. If the user selects some text, only the text styles will be available in the styles list. In the other case, when an object is selected, the list will show only styles defined for that object (currently available only for Internet Explorer). 每个样式都是针对不同的对象的，下面给出编辑器所支持的对象名，你可以通过 style 节点中的 element 属性将 样式与对应的对象匹配起来。
The object elements supported by the editor are:
When selecting an “Object” element and applying a style, no tags will be added surrounding the element. Only the defined attributes will be applied to that element. 当选中一个对象元素，并应用一个样式时，他并不像文本元素那样，在文本内容的两边加上一个标签，而是将属性节点里的属性直接应用到该对象元素中去。
Example: if you have an image in the editor and apply the “My Image” style (from our sample) the source could be something like this: 举例：假设在编辑器里有一个图形元素，你选中该元素后，应用 "My Image" （在我们的例子中）样式，那么结果源代码会显示出类似下面的情况：
| <img src="image.jpg" style="padding: 5px" border="2"> //直接在选中的img元素中添加 style和border属性。 |
OK，样式的配置部分讲噶了，休息，休息哈！
如果本文有翻译不周的地方，或有其他方面的评论，可以到下方发表评论。