ckeditor - CKEditor 自定义样式集覆盖默认值

Question

我正在测试添加自定义样式集。因此，在我的代码中，我添加了以下内容（根据说明）

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';

问题是它覆盖了 CK​​Editor 附带的其余默认样式。我似乎无法弄清楚如何将我的新样式附加到现有的样式中。有任何想法吗？

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'} }

]);

编辑栏：