Bug #86852

CKEditor doesn't show all configured stylesSets

Added by Simon Würstle 10 months ago. Updated 4 months ago.

Status:
Closed
Priority:
Should have
Assignee:
Category:
RTE (rtehtmlarea + ckeditor)
Target version:
-
Start date:
2018-11-05
Due date:
% Done:

0%

TYPO3 Version:
9
PHP Version:
7.2
Tags:
Complexity:
Is Regression:
Sprint Focus:

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.

rte_86852_1.0.0_201811060707.zip - Test Extension to reproduce the problem and showing a possible workaround (2.88 KB) Josef Glatz, 2018-11-06 07:40


Related issues

Duplicated by TYPO3 Core - Bug #88566: Problems with rte_ckeditor and yaml file New 2019-06-14

History

#1 Updated by Josef Glatz 10 months ago

  • Assignee set to Josef Glatz

#2 Updated by Josef Glatz 10 months ago

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.

  1. TYPO3 8.7LTS uses CKEditor 4.7.1 → it works
  2. TYPO3 9.5LTS uses CKEditor 4.10.1 → it only works if I adopt the order of the CSS classes in the stylesSet
  3. 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:
  1. Install the test extension in TYPO3 v8LTS. (All style set's work)
  2. Install the test extension in TYPO3 v9LTS. (The mentioned style does not work)
  3. 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'} }

#3 Updated by Josef Glatz 10 months ago

  • Status changed from New to Closed

I've created an issue at the CKEditor development repo at https://github.com/ckeditor/ckeditor-dev/issues/2578

I close this issue, as this must be an upstream problem

#4 Updated by Beat Haenger 4 months ago

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.

#5 Updated by Sebastian Klein about 1 month ago

  • Duplicated by Bug #88566: Problems with rte_ckeditor and yaml file added

Also available in: Atom PDF