Project

General

Profile

Actions
Copy link

Bug #102356

closed

Epic #99669: CKEditor5 Collection

Add example for configuring headings with classes into the docs

Added by Chris Müller about 1 year ago. Updated about 2 months ago.

Status:
Resolved
Priority:
Should have
Assignee:
Chris Müller
Category:
RTE (rtehtmlarea + ckeditor)
Target version:
-
Start date:
2023-11-09
Due date:
% Done:

100%

Estimated time:
TYPO3 Version:
12
PHP Version:
Tags:
Complexity:
Is Regression:
Sprint Focus:

Description

Given the following RTE configuration:

editor:
  config:
    heading:
      options:
        - { model: 'paragraph', title: 'Paragraph' }
        - { model: 'heading2', view: 'h2', title: 'Heading 2', class: 'h2' }
        - { model: 'heading3', view: 'h3', title: 'Heading 3', class: 'h3' }
        - { model: 'heading4', view: 'h4', title: 'Heading 4', class: 'h4' }

I would expect that when selecting a heading (e.g. "heading2") the defined class (e.g. "h2") is attached to the HTML alement. But this is not the case (neither in RTE directly nor in frontend).

According to the CKeditor documentation this should be done like in the example above:
https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuring-toolbar-buttons

Actions
Copy link
 #1

Updated by Chris Müller about 1 year ago

  • Parent task set to #99669
Actions
Copy link
 #2

Updated by Sébastien Delcroix 3 months ago · Edited

The value of the option class defined for a heading is only added to the headings dropdown menu of the editor, according to the documentation : https://ckeditor.com/docs/ckeditor5/latest/api/module_heading_headingconfig-HeadingConfig.html#member-options

If you want to add a class to your headings for frontend rendering, you need to add it to the view.classes option, as explained here : https://ckeditor.com/docs/ckeditor5/latest/features/headings.html#configuring-custom-heading-elements

For instance :

heading:
      options:
        - { model: 'heading2', view: { name: 'h2', classes: 'h2' }, title: 'Heading 2' }
        - { model: 'heading3', view: { name: 'h3', classes: 'h3' }, title: 'Heading 3' }

Tested and approved on 12.4.21. Issue can be closed ;)

Actions
Copy link
 #3

Updated by Chris Müller 2 months ago

Thanks, Sebastian, this works. So this should find its way into the examples chapter of the docs:
https://docs.typo3.org/c/typo3/cms-rte-ckeditor/13.4/en-us/Configuration/Examples.html

Actions
Copy link
 #4

Updated by Chris Müller 2 months ago

  • Assignee set to Chris Müller
Actions
Copy link
 #5

Updated by Chris Müller 2 months ago

  • Subject changed from Classes defined for headings are not considered to Add example for configuring headings with classes into the docs
Actions
Copy link
 #6

Updated by Chris Müller 2 months ago

  • Status changed from New to Accepted
Actions
Copy link
 #7

Updated by Garvin Hicking 2 months ago

@Chris Müller That sounds like a good idea, would you like to create a patch?

Actions
Copy link
 #8

Updated by Gerrit Code Review about 2 months ago

  • Status changed from Accepted to Under Review

Patch set 1 for branch main of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/87241

Actions
Copy link
 #9

Updated by Gerrit Code Review about 2 months ago

Patch set 1 for branch 13.4 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/87258

Actions
Copy link
 #10

Updated by Gerrit Code Review about 2 months ago

Patch set 1 for branch 12.4 of project Packages/TYPO3.CMS has been pushed to the review server.
It is available at https://review.typo3.org/c/Packages/TYPO3.CMS/+/87259

Actions
Copy link
 #11

Updated by Chris Müller about 2 months ago

  • Status changed from Under Review to Resolved
  • % Done changed from 0 to 100
Actions
Copy link

Also available in: Atom PDF