自定义FCKEditor中的“样式”

    在FCKEditor中，有一栏“样式”，默认提供了“Red Title”“Marker: Yellow”等一组默认样式。但是这样的样式通常并不能满足我们的需要，这时候，我们就可以通过修改FCKEditor的配置文件来自定义样式。修改方法有两种，分别如下（示例的FCKEditor版本号为2.6.4.1）：

    方法一：修改fckconfig.js文件
    打开fckconfig.js文件（在fckeditor目录下），找到FCKConfig.CustomStyles，可以看到如下定义：

FCKConfig.CustomStyles =
{
    'Red Title'    : { Element : 'h3', Styles : { 'color' : 'Red' } }
};

    这个就是默认的第一个"Red Title"的样式定义，其中Element:'h3'表示此样式使用<h3>标签围绕，Styles中的Hash值设置的是<h3>中的style属性，所以这个样式定义等价于这样的HTML：

<h3 style="color:Red;">some words</h3>

    那么如果我们需要加一个名为"TNT2 Style"的样式，并且显示为粗体，同时style中的background-color为黄色，需要怎么做呢？很简单，依葫芦画瓢：

FCKConfig.CustomStyles =
{
    'Red Title'    : { Element : 'h3', Styles : { 'color' : 'Red' } },
    'TNT2 Style': { Element : 'strong', Styles : { 'background-color' : 'Yellow' } }
};

    其生成的HTML等价于：

<strong style="background-color: yellow">some words</strong>

    以上这些只是设置外部标签以及定义style，如果我有一个现成的class需要引用呢？那么只需要使用如下代码：

FCKConfig.CustomStyles =
{
    'Red Title': { Element: 'h3', Styles: { 'color': 'Red'} },
    'TNT2 Style': { Element: 'strong', Styles: { 'background-color': 'Yellow' }, Attributes: {'class':'tnt2'} }
};

    生成的HTML等价于：

<strong class="tnt2" style="background-color: yellow">some words</strong>

    从上面的代码可以发现，其实就是定义了一个Attributes的属性，Attributes中可以定义标签中的任意属性，如size,width等等。

    方法二：修改fckstyles.xml文件
    打开fckstyles.xml文件（和fckconfig.js位于同一目录下），可以看到这是一个根节点为<Styles>，子节点为<Style>的配置文件，如果要完成上面等价于<strong class="tnt2" style="background-color: yellow">some words</strong>的效果，只需要添加一个Style节点：

    <Style name="TNT2 Style 2" element="strong">
        <Style name="background-color" value="Yellow" />
        <Attribute name="class" value="tnt2" />
    </Style>

    其中：
    element="strong"等同于方法一中的Element: 'strong'；
    <Style name="background-color" value="Yellow" />等同于方法一中的Styles : { 'background-color' : 'Yellow' }；
    <Attribute name="class" value="tnt2" />等同于方法一中的Attributes: {'class':'tnt2'}。
    注意：fckconfig.js中使用的Styles和Attributes用的都是负数，而fckstyles.xml中使用的节点名称是单数，如果有多个参数需要设置，就插入多个并列的标签即可。

    虽然是雕虫小技，不过很实用，可以很好地提高客户体验，同时提高编辑效率。