CKEditor自定义stylesSet覆盖默认值

Question

我正在测试添加自定义stylesSet。所以在我的代码中我添加了以下内容（每个instructions）

CKEDITOR.stylesSet.add('custom_style', [
  { name: 'No UL Bullets', element: 'ul', styles: { 'list-style-type': 'none' } },
  { name: 'My Custom Inline', element: 'span', attributes: { 'class': 'mine' } }
]);

oEditor.config.stylesSet = 'custom_style';

问题是它会覆盖CKEditor附带的其他默认样式。我似乎无法弄清楚如何只使用现有的一次附加我的新样式。有什么想法吗？

Answer 1

您无需更改config.stylesSet选项即可将样式附加到默认样式。您可以编辑styles.js文件，添加和删除样式。它是一个配置文件，就像config.js。

更新：您可以直接设置config.stylesSet以避免加载styles.js：

CKEDITOR.replace( 'editor1', {
    stylesSet: [
        { name: 'Big',              element: 'big' },
        { name: 'Small',            element: 'small' },
        { name: 'Typewriter',       element: 'tt' }
    ]
} );

Answer 2

以下是如何在CKEditor 4中替换和创建新样式和类的示例。这是 styles.js 文件的全部内容：

CKEDITOR.stylesSet.add ('default', [
/* My Block Styles */
{ name: 'My Div Class', element: 'div', attributes: {'class': 'my-div-class-name'} },
{ name: 'My Div Style', element: 'div', styles: {'padding': '10px 20px', 'background': '#f2f2f2', 'border': '1px solid #ccc'} },

/* My Inline Styles */
{ name: 'My Span Class', element: 'span', attributes: {'class': 'my-span-class-name'} },
{ name: 'My Span Style', element: 'span', styles: {'font-weight': 'bold', 'font-style': 'italic'} }

]);

编辑栏：