自定义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需要引用呢?那么只需要使用如下代码:
自定义FCKEditor中的“样式”自定义FCKEditor中的“样式”Code
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中使用的节点名称是单数,如果有多个参数需要设置,就插入多个并列的标签即可。

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

 

QQ:498977166

http://szw.cnblogs.com/
研究、探讨.NET开发
转载请注明出处和作者,谢谢!

 

自定义FCKEditor中的“样式”
Senparc官方教程《微信开发深度解析:微信公众号、小程序高效开发秘籍》,耗时2年精心打造的微信开发权威教程,点击这里,购买正版

 

上一篇:Node的初识


下一篇:ASP.NET MVC v2 Priview 2发布