Nicht-exklusive Stilregeln mit CSS-Klassen in CKEditor

Question

Ist es möglich, mehrere Optionen im Menü Stil, die ihre eigene CSS-Klasse festlegen, aber nicht gegenseitig ausschließen?

Zum Beispiel möchte ich etwas Ähnliches haben:

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

In CSS dann so etwas wie:

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

Dies funktioniert, aber das Problem ist, dass ich nicht haben können beide " Very Large Padding "und" Alternative Font "werden gleichzeitig aktiviert. Gibt es dafür eine Lösung, die das Setzen von Stilen über CSS anstelle des Inline-Attributs style beinhaltet?

Answer 1

Blockstile in CKEditor 4 können nicht kombiniert werden. Sie können jedoch Inline-Elemente verwenden (dh span):

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

die Ergebnisse:

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

oder ein Hybrid-Stil erstellen:

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