Bug #83043
open
Adding more than one CSS class
0%
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.
Updated by Riccardo De Contardi over 6 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
Updated by Paul A. Auwehla over 6 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.
Updated by Frans Saris over 6 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
Updated by Riccardo De Contardi over 6 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)
Updated by Paul A. Auwehla over 6 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.
Updated by Riccardo De Contardi over 6 years ago
- Status changed from Needs Feedback to New
Updated by Riccardo De Contardi almost 6 years ago
As far as I can see there is a commercial plugin for that https://ckeditor.com/cke4/addon/jsplusedittag