CKEditor 中 CSS 类的非独占样式规则

Question

是否可以在“样式”菜单中设置多个选项，它们各自设置 CSS class，但又不相互排斥？

比如我想要类似这样的东西：

stylesSet: [
    {name: 'Very Large Padding',
     element: 'p',
     attributes: {
         class: 'very-large-padding',
     }},
    {name: 'Alternative Font',
     element: 'p',
     attributes: {
         class: 'alternative-font',
     }},
]

然后在 CSS 中，类似于：

.very-large-padding { padding: 4242px; }
.alternative-font { font-family: "MyFont", sans-serif; }

这可行，但问题是我不能同时激活 "Very Large Padding" 和 "Alternative Font"。是否有解决方案，涉及通过 CSS 而不是内联 style 属性设置样式？

Answer 1

CKEditor 4 中的块样式无法组合。但是，您可以使用内联元素（即 span）：

{
    name: 'Very Large Padding',
    element: 'span',
    attributes: {
        class: 'very-large-padding',
    }
},
{
    name: 'Alternative Font',
    element: 'span',
    attributes: {
        class: 'alternative-font',
    }
},

这导致：

<p><span class="alternative-font">Fo<span class="very-large-padding">oB</span>ar</span></p>

或创建混合样式：

{
    name: 'Very Large Padding with Alternative Font',
    element: 'span',
    attributes: {
        class: 'very-large-padding alternative-font',
    }
},

CKEditor 中 CSS 类的非独占样式规则

Non-exclusive style rules with CSS classes in CKEditor

ckeditor

CKEditor 中 CSS 类 的非独占样式规则

Non-exclusive style rules with CSS classes in CKEditor

ckeditor

CKEditor 中 CSS 类的非独占样式规则