2014-09-06 56 views
0

我已经重定向contents.css文件为我的CKEditor 3.6到我的网站的样式表:addStylesSet如何与内容css交互?

CKEDITOR.config.contentsCss = '/css/style.css'; 

现在我想从样式表中添加一些样式到下拉框供用户编辑内容时进行选择。前面的开发者创建了这个:

CKEDITOR.addStylesSet('cms_styles', 
[ 
    { 
     name : 'Page Header', 
     element : 'h2' 
    }, 

    { 
     name : 'Page Text', 
     element : 'p' 
    }, 

它似乎工作,但对我来说没什么意义。鉴于类名不能有空格,这些从哪里获得他们的风格?如果我们只是将样式添加到下拉列表中,为什么要指定元素? Google对addStylesSet没有好的结果,我发现的开发者指南(http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles)确实不是很具体。

我不想显示所有可用的类;只是我们定义的几个。

回答

0

样式对象上的name属性仅用于显示目的,它不会以任何方式将其置入内容中。以前的开发人员创建的工作原理是因为这些样式只是指定了元素,并且css可能使用这些元素说明符定义了样式。

element属性正在设置,以便CKEditor知道如何将该样式应用于内容。如果您的element属性的样式值为p,则该样式将成为块样式,并将应用于内容中当前活动的p块。如果element属性的值为span,则该样式将仅应用于所选文本(如果其中一个不存在,它将被一个span元素包围)。

要在下拉菜单中获取样式以表示您的外部css中的类,您需要将样式对象添加到样式集,并设置样式要应用到的元素的class属性。通过在样式对象的attributes属性上设置属性,可以让CKEditor在要应用样式的元素上添加或修改属性。为了达到我们的目的,我们要设置attributes属性的class属性,以便在您的css中应用定义的类。

CSS:

p.myBlockStyle { 
    font-size: 32px; 
} 

CKEditor的stylesSet阵列:

[ 
    { 
     name: "My Block Style", 
     element: "p", 
     attributes: { 
      "class": "myBlockStyle" 
     } 
    } 
] 

注意,class财产有它的名字引用,因为class是保留关键字。