Ticket #5980 (confirmed New Feature)

Opened 4 years ago

Last modified 8 months ago

Styles: combine classes and allow wildcards

Reported by: anrikun Owned by:
Priority: Normal Milestone:
Component: Core : Styles Version:
Keywords: Cc:

Description

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.

Change History

comment:1 Changed 4 years ago by fredck

  • Milestone CKEditor 3.x deleted

Milestone CKEditor 3.x deleted

comment:2 Changed 4 years ago by anrikun

Any feedback about this feature please.

comment:4 Changed 21 months ago by frozeman

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.

Last edited 21 months ago by frozeman (previous) (diff)

comment:5 Changed 21 months ago by j.swiderski

  • Status changed from new to confirmed

Problem 2 It is not possible to have wild card 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.

Last edited 21 months ago by j.swiderski (previous) (diff)

comment:6 Changed 21 months ago by frozeman

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!

comment:7 Changed 21 months ago by j.swiderski

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.

Last edited 20 months ago by j.swiderski (previous) (diff)

comment:8 Changed 20 months ago by j.swiderski

#9922 was marked as duplicate.

comment:9 Changed 12 months ago by 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.

comment:10 Changed 12 months ago by j.swiderski

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.

comment:11 Changed 8 months ago by j.swiderski

#11330 was marked as duplicate

Note: See TracTickets for help on using tickets.
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy