Styles: combine classes and allow wildcards

[anrikun]

Currently, styles can be like this:
[

{name: 'myP1', element: 'p', attributes: {'class': 'class1'}},
{name: 'myP2', element: 'p', attributes: {'class': 'class2'}}

]);

Problem 1: it is not possible to apply both classes. When a class is applied, the other is removed...

Problem 2: when applying myP1 or myP2 to a H2, H2 will be turned into a P. I would like something like this: [

{name: 'myBlock1', element: '#', attributes: {'class': 'class1'}},
{name: 'myP2', element: 'p', attributes: {'class': 'class2'}}

]);

Style myBlock1 could be applied to any block without changing its tag.
Actually, CKEditor's code seems to provide a wildcard # to target any block element but it does not seem to work as expected.

[Frederico Caldeira Knabben]

Milestone CKEditor 3.x deleted

[anrikun]

Any feedback about this feature please.

[Fabian Vogelsteller]

I would strongly request that feature too! Expecially the first part. Iam right now writting a Bootstrap CSS Framework style. In there there are buttons which get the class "btn" But you can further change the buttons style by adding "btn btw-large btn-warning" etc.

With the current implementation of not beeing able to combine styles i would have to create endless combinations of styles to be able to get all possibilities. this is unpracticable and the styles list would become unreadable.

In my view multiple styles should be applicable to an element! Its only logical. If CKEditor want to be compatible in styling this feature should be add.

[Jakub Ś]

Problem 2 It is not possible to have wildcard styles. Styles have to be presented somehow in Styles dropdown so some element needs to be assigned there. This part is a won't fix by design.

Problem 1 Currently it is not possible to join classes that way but I agree when user wants to create element with multiple different classes he has to create endless combinations. Perhaps this should be configurable whether current style should overwrite existing element styles or they should be joined.

It is possible to define multiple classes for a single element (SEE e.g. #9762) but this solution is not enough.

[Fabian Vogelsteller]

I dont really understand problem 1.

what you mean with wild card styles?

i basically only thought an what you pointed out in problem2: joining styles, but it should also be possible to remove styles, without affecting still applied ones... I guess its not easy, but would be definitively a great feature!

[Jakub Ś]

In short problem one is about joining styles. It is possible to prepare style rule having both classes but it is impossible to assign first one then the other using two different rules.

You have written:

joining styles, but it should also be possible to remove styles, without affecting still applied ones

Joining/replacing the styles could perhaps be possible, based on some configuration option but removing styles of your choice can only be made with some new plugin IMHO.
This makes me wonder if current behaviour with replacing the classes for block styles isn't best solution here.

---

Problem two is about wild card styles: {name: 'myBlock1', element: '#',
No element is defined. This is not possible as element is used to present style in dropdown.

[Jakub Ś]

#9922 was marked as duplicate.

[heaven]

Hi, what if add a targets: '*' option, which will allow to apply the styles to any element. So when user apply the next style:

{
  name: "myBlock1",
  element: "h1",
  targets: "*" // or wildcard: true
}

to a "p" element, the element will be wrapped with "h1" tag, css rules and classes defined in that style will be added to the new "h1" element.

[Jakub Ś]

The part about merging is a duplicate of #4505.

There are two main tickets about styles: #10675 and #4505.

I'm leaving this bug as it mentions wildcards.

[Jakub Ś]

#11330 was marked as duplicate

[Jakub Ś]

#3731 is very similar to this one.

[Jakub Ś]

Other issues can be found in #10824, #10675, #4505, #10742, #11120.