Bug #83043

Adding more than one CSS class

Added by Paul A. Auwehla almost 2 years ago. Updated about 1 year ago.

Status:
New
Priority:
Must have
Assignee:
-
Category:
RTE (rtehtmlarea + ckeditor)
Target version:
-
Start date:
2017-11-20
Due date:
% Done:

0%

TYPO3 Version:
8
PHP Version:
Tags:
Complexity:
Is Regression:
Sprint Focus:

Description

In rtehtmlarea it was possible to cumulate CSS classes.
This was an outstanding and flexible solution
in the new times of bootstrap and other css frameworks.

Example:
Having a paragraph p.Text you can add another css-class from the
editors css-styles-list like "TextlineBelow".
Resulting in an paragraph p.Text.TextlineBelow
And better: this two css-stylenames were shown in the
status bar below the editors textarea for a quick control.

Adding still more css-styles was possible every time.
Removing styles from the list was possible, too.

ckEditor does not yet have this feature.
Only one class per tag is available.

This is a serious fall back making editing
much more inflexible than before.

Please reinvent this outstanding typo3/rtmlarea feature.

History

#1 Updated by Riccardo De Contardi almost 2 years ago

  • Status changed from New to Needs Feedback
  • TYPO3 Version changed from 7 to 8

Can you give me an example of what you are trying to do?

As far as I can see this thing is possible with CKEditor: in the "styleSet" section of your .yaml configuration file you can add:

editor:
  config:
    stylesSet:
      - { name: "Another title H3", element: "h3", attributes : {class :"green red"} } 

Does this work for you? Or am I understanding it wrong?

P.s.: I set the TYPO3 Version info of this issue to "8" as CKEditor is not available for version 7

#2 Updated by Paul A. Auwehla almost 2 years ago

Your example is exactly the problem and the restriction ckEditor
is enforcing: You have to prefine sets of classes.
And only these predefined sets editors are able to use.

But richtext-editing mean: Editors should be able to choose
all combinations of allowed css-styles.
rtehtmlarea editors are used to the flexible, modern way of
applying css-class and CUMULATE them.

See my examples above.
Its possible in rtehtmlarea to add a third, fourth ... style.
For ex. a background-style-class, ex "Box-DarkGray",
another fontstyle ex. "LCD-Font" etc. pp.
The status bar would read like this:
p.Text.TextlineBelow.Box-DarkGray.LCD-Font

Most of my editors work on scientific texts.
Applying fonts to super or sub, lines, indents etc pp.
is essential to them. These things are css-prefined
to allow exact editing and proper layout of the text.
I had to remove ckEditor beeing completely unusable for this purpose.

(This is by the way exactly the principle
bootstrap et al. to define their classes.)

With rtehtmlarea your are back-to-the-future in this case.
ckEditor is no option yet at all for this flexible css use.

#3 Updated by Frans Saris almost 2 years ago

There is an ticket for this in the ckeditor issue tracker https://dev.ckeditor.com/ticket/11120

Maybe we can find a plugin that provides this functionality

#4 Updated by Riccardo De Contardi almost 2 years ago

Most of my editors work on scientific texts.

I think that for this specific task, it would be more useful a plugin that helps writing mathematical formulas (I guess that there are several ones for CKEditor)

#5 Updated by Paul A. Auwehla almost 2 years ago

Thank you for opening a ticket.
I already searched for a plugin for ckEditor and found this hint:
https://stackoverflow.com/questions/29510288/how-to-apply-multiple-styles-to-one-element-in-ckeditor

And there is/was a discussion at ckEditor:
https://dev.ckeditor.com/ticket/11120

PS.
Riccardo mentioned formulas: No, I dont want a specific feature for formulas.
The example above is just an example where the multi-class feature is very handy and usefull.
Adding css-classes is a common and important feature from rtehtmlara
still lacking for some unknown reason in ckEditor for typo3.

#6 Updated by Riccardo De Contardi almost 2 years ago

  • Status changed from Needs Feedback to New

#7 Updated by Riccardo De Contardi about 1 year ago

As far as I can see there is a commercial plugin for that https://ckeditor.com/cke4/addon/jsplusedittag

Also available in: Atom PDF