Question

我已将CKEditor 3.6的contents.css文件重定向到我网站的样式表：

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

现在，我想将该样式表中的一些样式添加到下拉框中，供用户在编辑内容时选择。之前的开发人员创建了这个：

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

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

它似乎有效，但对我来说没什么意义。鉴于类名不能有空格，这些是从哪里获得的？如果我们只是在下拉菜单中添加样式，为什么要指定元素？谷歌发现addStylesSet没有好结果，我发现的开发者指南（http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Styles）确实不是非常具体。

我不想显示所有可用的课程;只是我们定义的一些。

Answer 1

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

正在设置element属性，以便CKEditor知道如何将该样式应用于内容。如果您的element属性的样式的值为p，则该样式将成为块样式，并将应用于内容中当前活动的p块。如果element属性的值为span，则样式将仅应用于所选文本（如果尚未存在，则将使用span元素包围该样式。

要在下拉列表中获取样式以表示外部CSS中的类，您需要将样式对象添加到样式集，并让它设置应用样式的元素的class属性。通过在样式对象的attributes属性上设置属性，您可以让CKEditor在要应用样式的元素上添加或修改属性。出于我们的目的，我们希望设置class属性的attributes属性，以便在您的css中定义类。

CSS：

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

CKEditor stylesSet数组：

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

请注意，class属性引用了它的名称，因为class是保留关键字。

addStylesSet如何与内容css交互？

1 个答案: