Bug #86852
closed
CKEditor doesn't show all configured stylesSets
Added by Simon Würstle over 5 years ago.
Updated almost 2 years ago.
Category:
RTE (rtehtmlarea + ckeditor)
Description
Following CKEditor configuration works with current TYPO3 8.7.20, but NOT with TYPO3 9.5.1:
editor:
config:
stylesSet:
- { name: 'Button', element: 'a', attributes: { class: 'button button--primary'} }
- { name: 'Small button', element: 'a', attributes: { class: 'button button--primary button--small'} }
- { name: 'Big button', element: 'a', attributes: { class: 'button button--primary button--big'} }
With this configuration only "Button" and "Small button" are available in the style dropdown in RTE fields. The problem seems to be that some of the declared classes are the same, i.e. "button" and "button--primary". If I change the class declaration for "Big button" to "foobar", it's available again in the styles dropdown.
Files
- Assignee set to Josef Glatz
TL;DR¶
This is no TYPO3 bug. ¯\_(ツ)_/¯
Details¶
The stylesSet feature relies completely on CKEditor. It looks like a bug in one of the last CKEditor updates.
- TYPO3 8.7LTS uses CKEditor 4.7.1 → it works
- TYPO3 9.5LTS uses CKEditor 4.10.1 → it only works if I adopt the order of the CSS classes in the stylesSet
- TYPO3 9.5LTS with temporary CKEditor 4.7.1 → it works
(In difference to the former RTE htmlArea we rely completely on the upstream of CKEditor)
For testing purposes you have 2 possibilities:
- Install the test extension in TYPO3 v8LTS. (All style set's work)
- Install the test extension in TYPO3 v9LTS. (The mentioned style does not work)
- Temporary downgrade CKEditor version in TYPO3 v9LTS (All style set's work) (
cd FolderOfYourLocalTYPO3Master/Build && yarn upgrade ckeditor@4.7.1 -E -D && yarn build)
Workaround¶
Try to change the order of the class attribute's value of the concerning style set
Instead of using
- { name: 'Big button', element: 'a', attributes: { class: 'button button--primary button--big'} }
bring button--big in front of button--primary
- { name: 'Big button', element: 'a', attributes: { class: 'button button--big button--primary'} }
- Status changed from New to Closed
I close this issue, as this must be an upstream problem
The workaround works, thanks!
My theory on why the workaround works (which I could not disprove) is: If the classes are in alphabetical order in the YAML-file the stylesSets will be shown in the editor, if not, it will not be shown.
Example:
If you have the classes "button" "button-blue" "button-small" to give then it must be:
- { name: 'Big button', element: 'a', attributes: { class: 'button button-blue button-small'} }
All other orders will not work. This is a very strange bug and must be solved by CKEditor.
- Has duplicate Bug #88566: Problems with rte_ckeditor and yaml file added
- PHP Version deleted (
7.2)
This can be circumvented by setting
editor:
config:
extraAllowedContent: ""
(The default from EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml is "*(*)[data-*]").
Reproducible in TYPO3v11.5.10 (CKEditor 4.18.0)
Also available in: Atom
PDF
Updated by 
Updated by 
Updated by 
Updated by