自定义FCKEditor中的“样式”-阿里云开发者社区

自定义FCKEditor中的“样式”

2009-09-29 750

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 在FCKEditor中，有一栏“样式”，默认提供了“Red Title”“Marker: Yellow”等一组默认样式。但是这样的样式通常并不能满足我们的需要，这时候，我们就可以通过修改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需要引用呢？那么只需要使用如下代码：

Code

生成的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开发
转载请注明出处和作者，谢谢！

Senparc官方教程《微信开发深度解析：微信公众号、小程序高效开发秘籍》，耗时2年精心打造的微信开发权威教程，点击这里，购买正版！