Styles 样式
在FCK压缩包提供的完整版的例子中，我们可以在编辑器中看到四个下拉列表，一个是样式下拉列表，一个是格式下拉列表，还有就是字体和大小这两个下拉列表。本章所讲的就是如何自定义 样式下拉列表中的样式。在一些cms中 比如 dedecms 里就把 样式下拉列表给去掉了，可能他觉得不是很常用吧。
Styles Configuration 样式的配置
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. 样式下拉列表也因此应运而生。
Customizing the Styles list 自定义样式列表
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' ;
The Styles XML file xml样式文件 （在FCKeditor 的安装目录下就有个默认的样式文件：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"。
Style node Style 节点
The "Style" nodes have two mandatory attributes: style 节点有两个必须的属性：
- name: defines the text shown in the styles list. (name)名称属性，样式的名称，用于定义 在样式列表中该样式所显示的名称。
- element: the element used to apply the style on text selection or the “object” element to which the style can be applied. (element)元素属性：每个样式都是针对特定的元素的，通过该属性可以指明 该样式可以应用到哪种html元素上。
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 标签应用到了所选择的文本上了。
来源：https://www.cnblogs.com/yehu/archive/2010/09/04/1817768.html