自定义FCKEditor中的“样式”

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

    方法一：修改fckconfig.js文件
    打开fckconfig.js文件（在fckeditor目录下），找到FCKConfig.CustomStyles，可以看到如下定义：
    这个就是默认的第一个"Red Title"的样式定义，其中Element:'h3'表示此样式使用<h3>标签围绕，Styles中的Hash值设置的是<h3>中的style属性，所以这个样式定义等价于这样的HTML：

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

    以上这些只是设置外部标签以及定义style，如果我有一个现成的class需要引用呢？那么只需要使用如下代码：
    生成的HTML等价于：
    从上面的代码可以发现，其实就是定义了一个Attributes的属性，Attributes中可以定义标签中的任意属性，如size,width等等。

    方法二：修改fckstyles.xml文件
    打开fckstyles.xml文件（和fckconfig.js位于同一目录下），可以看到这是一个根节点为<Styles>，子节点为<Style>的配置文件，如果要完成上面等价于 < strong  class ="tnt2"  style ="background-color: yellow" > some words </ strong >的效果，只需要添加一个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年精心打造的微信开发权威教程，点击这里，购买正版！