Feature #51905

Manage multiple classes attribution inside RTE

Added by Vincent Mariani about 6 years ago. Updated about 2 years ago.

Status:
Closed
Priority:
Must have
Assignee:
-
Category:
RTE (rtehtmlarea + ckeditor)
Target version:
Start date:
2013-09-11
Due date:
% Done:

100%

PHP Version:
Tags:
Complexity:
Sprint Focus:

Description

Today, more and more CSS frameworks such as bootstrap.com provide many CSS styles which require two or more classes on a single tag.

E.G: <a class="btn btn-danger">Alert</a>

To apply this kind of style, we need to define two styles in RTE configuration (one for btn class and one for btn-danger class) and ask contributor not to forget these two.

A good enhancement for RTE configuration in next TYPO3 version is to provide a way to add more than one class at once. Or at least provide an easy way to remap classes by the proc attribute. (RTE may use one class : btn=btn-danger, when we save, the RTE proc remaps this class in two : btn btn-danger).


Related issues

Related to TYPO3 Core - Bug #60425: RTE.classesAnchor.[ id-string ].titleText doesn't work Closed 2014-07-21
Related to TYPO3 Core - Bug #71985: RTE classes requires doesn't work in LinkHandler Closed 2015-11-30
Related to TYPO3 Core - Bug #86240: rte link wizard selected class is not set if multiple classes Closed 2018-09-13
Blocked by TYPO3 Core - Feature #58122: RTE: Mark CSS class as not selectable Closed

Associated revisions

Revision d321fefe (diff)
Added by Stanislas Rolland about 5 years ago

[FEATURE] Add dependencies between classes in RTE

To comply with complex CSS frameworks like Twitter Bootstrap, we need
to add multiple classes on the same element. This adds complexity for
authors. With this new dependency feature, users just have to select
one style instead of many styles.

The syntax of this new property is:
RTE.classes.[ classname ] {
.requires = list of class names; list of classes that are
required by the class;
if this property, in combination with others, produces a
circular relationship, it is ignored;
when a class is added on an element, the classes it
requires are also added, possibly recursively;
when a class is removed from an element, any
non-selectable class that is not required by any of the
classes remaining on the element is also removed.
}

Releases: master
Resolves: #51905
Change-Id: I890e6786647a4b31e759e8a3086b3bd8c7e5dd4e
Reviewed-on: http://review.typo3.org/29643
Reviewed-by: Stanislas Rolland <>
Tested-by: Stanislas Rolland <>

History

#1 Updated by Clément MICHELET about 6 years ago

In the past, it was possible to do this by using classes* configuration.
But, now, these features are deprecated and seems to have been removed in 6.1.

It could be great to have an additional attribute inside RTE.classes.[className] which allow to define the classes added.

The main problem that I see at this moment is that the parsing from contentCSS will display styles if "showTagFreeClasses" is On and will not display [className] because there is no corresponding definition in stylesheet.

In Bootstrap package, the workaround applied is to copy common class style (e.g : btn) inside context class style (e.g : btn-primary).

An other workaround is to use rte specific class (e.g: rte-btn-primary) and perform transform to bootstrap equivalent (e.g: btn btn-primary).

#2 Updated by Rafal Brzeski about 6 years ago

I think you actually can do this,

try this

RTE.default {
    buttons {

        #***** new classes for links
        link {
            properties {
                class {
                    allowedClasses := addToList(btn v2 color2 icoAfter icoArrRWhite, btn v3 color1)
                }
            }
        }
    }

}

#3 Updated by Ernesto Baschny about 6 years ago

  • Target version deleted (6.2.0)

#4 Updated by Stefan Neufeind about 6 years ago

Just to be clear: This is about adding multiple classes when selecting one entry from the dropdown? Afaik that should work.

The other thing that I lately came up was adding multiple styles by selecting entries one after another - like "big" and "red". There is no solution for that, right?

#5 Updated by Clément MICHELET almost 6 years ago

Rafal Brzeski wrote:

I think you actually can do this,

try this

[...]
}

Thanks for your proposal but it doesn't fit with my needs.
Your configuration only provide custom classes in the insert/modify link dialogue.

In addition, it's not possible to define a label for a combination of classes in "RTE.classes". It's not really important for developers / integrators but for end-user, it's really important as they can't have full knowledge of CSS.

Stefan Neufeind wrote:

Just to be clear: This is about adding multiple classes when selecting one entry from the dropdown? Afaik that should work.

Yes but I didn't find any way in 6.1+ to do this. Prior to this version, it was possible to do this with some (deprecated) properties.

The other thing that I lately came up was adding multiple styles by selecting entries one after another - like "big" and "red". There is no solution for that, right?

We can apply multiple styles on same element except for classes which are defined in "RTE.mutuallyExclusiveClasses". It's work actually and is not the purpose of my request.

#6 Updated by Clément MICHELET over 5 years ago

I've been thinking about this feature and I suggest a different implementation that allow to set multiple classes. Allowing to set multiple classes add many complexities to manage styles action (add, remove, mutually exclusive classes, etc.).

We can add dependencies between RTE classes :
  • A class can have multiple dependencies (ex: btn-danger require btn class)
  • When selecting a style which have dependencies, if current target doesn't have all requirements, they are added automatically
  • When removing a style, only the target style is removed, not all dependencies
In a sample case with Twitter Bootstrap :
  • We declare a style "btn"
  • We declare multiple context classes "btn-danger", "btn-default" which depends on the style "btn" and they are mutually exclusive
  • By selecting the style "btn-danger", the style "btn" is also applied
  • By selecting the style "btn-success", the style "btn-danger" is removed and the style "btn-success" is applied
  • By removing the style "btn-success", the style "btn-success" is removed and the style "btn" is still in place

An additionnal feature could be to mark a class as not selectable / not visible. End users doesn't have to see "btn" style. To avoid having orphan classes setted, we could add a check if a depended class is setted, marked as not selectable and don't have another classes which depends on it. If no dependency still remains, we remove the "master" class.

I think it will cover all the needs for Twitter Bootstrap and other CSS frameworks.

#7 Updated by Stefan Neufeind over 5 years ago

The dependencies that Clément explained imho make sense.

#8 Updated by Clément MICHELET over 5 years ago

  • Target version set to 7.0

I've created another issue to handle "no selectable" status : #58122

#9 Updated by Gerrit Code Review over 5 years ago

  • Status changed from New to Under Review

Patch set 1 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/29643

#10 Updated by Clément MICHELET over 5 years ago

My first patch add the injection of required classes. It handles also the orphan class case.

But how to handle following case: User ask to remove a style which is required. What do we do ?
  1. Let the user doing what he wants (allow)
  2. Alert and cancel action (cancel)
  3. Alert and confirm action (confirm)
  4. Not able to do this action (forbid)

IMHO, with loop dependencies or tree dependencies, we must not block user to do remove action because he will not be able to remove style at all. I don't think that it is a real case (CSS really too complex) but is technically possible. In RTE, you can only remove last applied style so if the last style is required, you're stuck.

So it remains only allow and confirm solution (or another suggestion).

With allow solution, it's the responsability of the end-user to don't break the style. But in this case, the end-user have to know how CSS classes works and this is not the case in reality. Same reason that we can't ask users to select 2 styles for combination. This really matter only if we are concerned by output.

With confirm solution, we inform users that his action has consequences on rendering. He can choose to confirm or cancel and take the responsability of this. It can be really annoying for users but can have a dissuasive effect.

I can start on allow solution (nothing to do) and If we need to change to confirm solution, open an another issue.

Some thought about that ?

#11 Updated by Gerrit Code Review about 5 years ago

Patch set 2 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at http://review.typo3.org/29643

#12 Updated by Gerrit Code Review about 5 years ago

Patch set 3 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at http://review.typo3.org/29643

#13 Updated by Gerrit Code Review about 5 years ago

Patch set 4 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at http://review.typo3.org/29643

#14 Updated by Gerrit Code Review about 5 years ago

Patch set 4 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at http://review.typo3.org/29643

#15 Updated by Gerrit Code Review about 5 years ago

Patch set 4 for branch master of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at http://review.typo3.org/29643

#16 Updated by Stanislas Rolland about 5 years ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100

#17 Updated by Eric Chavaillaz over 4 years ago

Hi,

Is it possible to have a working example? I try to use this feature but it not work...

Thanks,
Eric

#18 Updated by Andreas Becker about 4 years ago

Is there a way to use this in TYPO3 6.2?

#19 Updated by Malte Koitka about 4 years ago

For anybody wondering: At least for TYPO3 7.5 the required classes are only applied by choosing the style from the text style dropdown.

Does it make sense to also apply this functionality to the link style dropdown?

#20 Updated by Ryan Klarhölter over 3 years ago

JFTR. The following configuration works (using TYPO3 7.6.4):

RTE {
    default {
        proc.allowedClasses := addToList(button--ghost)
        buttons.link.properties.class.allowedClasses := addToList(button--ghost)
    }
    classesAnchor.buttonGhost {
        class = button--ghost
        type = page
    }
    classes.button--ghost {
        name = Ghost-Button
        requires = button
    }
}

Result:

<a href="/" class="button button--ghost">Link</a>

#21 Updated by Riccardo De Contardi about 2 years ago

  • Status changed from Resolved to Closed

#22 Updated by Marco von Arx about 1 year ago

  • Related to Bug #86240: rte link wizard selected class is not set if multiple classes added

Also available in: Atom PDF