TYPO3 Core

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).

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)
                }
            }
        }
    }

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?

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.

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.).

• 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

• 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.

The dependencies that Clément explained imho make sense.

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

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 ?

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

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

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

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

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

Hi,

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

Thanks,
Eric

Is there a way to use this in TYPO3 6.2?

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?

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>