Project

General

Profile

Actions
Copy link

Bug #86852

closed

CKEditor doesn't show all configured stylesSets

Added by Simon Würstle over 5 years ago. Updated almost 2 years ago.

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

0%

Estimated time:
TYPO3 Version:
9
PHP Version:
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.

Files

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

Related issues 1 (0 open — 1 closed)

Has duplicate TYPO3 Core - Bug #88566: Problems with rte_ckeditor and yaml fileClosed2019-06-14

Actions
Actions
Copy link
 #1

Updated by Josef Glatz over 5 years ago

  • Assignee set to Josef Glatz
Actions
Copy link
 #2

Updated by Josef Glatz over 5 years 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'} }
Actions
Copy link
 #3

Updated by Josef Glatz over 5 years 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

Actions
Copy link
 #4

Updated by Beat Haenger about 5 years 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.

Actions
Copy link
 #5

Updated by Sebastian Klein almost 5 years ago

  • Has duplicate Bug #88566: Problems with rte_ckeditor and yaml file added
Actions
Copy link
 #6

Updated by Jonas Eberle almost 2 years ago

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

Actions
Copy link

Also available in: Atom PDF