发布于 2015-08-17 03:26:21 | 515 次阅读 | 评论: 0 | 来源: PHPERZ
样式组合（Stryles Combo）插件将一个组合加入到 CKEditor 的工具栏中，包含一个样式列表。此列表使很容易地将定制的样式和语义值应用于在编辑器中生成的内容上。
可以很容易地定制组合下拉列表中可用的条目，以满足你的需要。
样式定义是一个 JavaScript 数组，通过调用 CKEDITOR.stylesSet.add 函数注册。必须给样式定义赋以唯一的名字， 这样后面就可以配置每个编辑器实例来加载它。 这种方法可以使一个样式定义被页面中多个 CKEditor 实例共享。
下面的代码展示了如何注册一个例子样式定义。
CKEDITOR.stylesSet.add( 'my_styles', [
// Block-level styles
{ name: 'Blue Title', element: 'h2', styles: { 'color': 'Blue' } },
{ name: 'Red Title' , element: 'h3', styles: { 'color': 'Red' } },
// Inline styles
{ name: 'CSS Style', element: 'span', attributes: { 'class': 'my_style' } },
{ name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } }
]);
如上面所示的样式定义注册可以内置于页面源代码中， 或者存在于外部文件中， 只要需要时， “按需”加载。 （见下面） 。
当准备好定义后，你必须通过使用 stylesSet 设置使编辑器应用新注册的样式。这可以在 config.js 文件中设置，例如：
config.stylesSet = 'my_styles';
可以将样式定义的注册调用包含在一个外部 JavaScript 文件中。缺省情况，CKEditor 从其安装文件夹中的 styles.js 文件中加载样式定义。
你 的样式定义文件可以保存在站点的任意地方（或互联网的某个地方） 。但，你必须知道访问它所需的 URL。例如，你可以将此文件保存在站点的根目录中，然后按/styles.js 调用它， 或者放在其它任意地方， 并使用其完整的URL引用它， 如http://www.example.com/styles.js。
此时，改变 stylesSet 设置，使编辑器指向此文件：
config.stylesSet = 'my_styles:/styles.js';
或者
config.stylesSet = 'my_styles:http://www.example.com/styles.js';
样式定义设置的语法总是：样式定义名称:文件的 URL。
注意，必须使用在此文件中注册样式定义时使用过的唯一的名称。
在样式定义中的输入项称为 “样式规则” 。 每条规则定义了单个样式的显示名字和元素、属性以及所使用的 CSS 样式。下面是它的一般表现形式：
{
name: 'Name displayed in the Styles drop-down list',
element: 'HTML element name (for example "span")',
styles: {
'css-style1': 'desired value',
'css-style2': 'desired value',
...
}
attributes: {
'attribute-name1': 'desired value',
'attribute-name2': 'desired value',
...
}
}
名称和元素值是必须的，而其它的值是可选的。
有三种样式类型，每一种都与在样式规则中使用的元素相关:
存在另一种简化的方法， 用于定制在 CKEditor 中生成文档的样式， 用外部 CSS 样式单文件中添加的样式定义来填充下拉清单。 样式单解析器插件允许使用现有的 CSS 样式，而不必按上面给出的格式专门为 CKEditor 定义样式。
安装完样式单解析器后，需要使用 contentsCss 配置设置，提供含有样式定义的 CSS 文件的位置：
config.contentsCss = 'sample_CSS_file.css';
最后，如果你想跳过加载 CKEditor 缺省使用的样式，可以将 stylesSet 设置为空值：
config.stylesSet = [];
这种解决方法使得可以配置编辑器使用现有的 CSS 样式单规则，而不需要为 CKEditor生成单独的样式定义。另一方面，前面使用的方法提供了对用户可以使用样式的更多控制，因此，两种方法可以按需要互换使用。
可以细调此插件，以使只考虑与 stylesheetParser_validSelectors 配置值相匹配的 CSS 选择器。默认的正则表达式接受 element.class 形式的所有 CSS 规则，但可以修改它，以引用有限的元素集，如下面的例子：
// Only add rules for <p> and <span> elements.（仅为<p>和<span>元素增加规则
config.stylesheetParser_validSelectors = /\^(p|span)\.\w+/;
通 过设置 stylesheetParser_skipSelectors 的配置值，也可以进行定制。那么，该插件将会角力忽略与正则表达式相匹配的 CSS 规则，不会在下拉列表中显示它们， 也不会使用它们输出文档内容。默认值不包括为<body>的所有元素和为非具体元素定义的类，但可以修改它，以忽略更广泛的元素集，如下例：
// Ignore rules for <body> and <caption> elements, classes starting with "high", and anyclass defined for no specific element.（忽略<body>和<caption>元素、以“high”开头的类，以及为非具体元素定义的类的规则）
config.stylesheetParser_skipSelectors = /(^body\.|^caption\.|\.high|^\.)/i;