Once upstream has fixed the drawbacks (mentioned below), provide a configuration option for Drupal Text Formats to expose a DIV in the CKE toolbar pulldown for headlines.
Eg, add the following lines in core/modules/ckeditor5/ckeditor5.ckeditor5.yml:
options:
- { model: 'paragraph', title: 'Paragraph', class: 'ck-heading_paragraph' }
- { model: 'div', view: 'div', title: 'Div', class: 'ck-heading_div' }
- { model: 'heading1', view: 'h1', title: 'Heading 1', class: 'ck-heading_heading1' }
Then DIV appears as an option in the Drupal Text Format edit page, and if selected there, it also shows in the CKEdtior pulldown for headings.
This approach currently has some drawbacks which must first be solved upstream:
- If you select multiple paragraphs, then select "Div" from the headings pulldown, CKE5 places a DIV around each paragraph.
- If you switch to Source mode, and place a single DIV around several P tags, CKE5 removes the DIV when switching out of Source mode.
Comments
Comment #2
hoporr commentedThank you @rgpublic.
I updated the issue headline to refer to "CKEditor 5" (same spelling as on the original issue), so that a search may find this easier.
Comment #3
jwilson3I've applied the issue template to the issue summary and added steps to reproduce, as well as some of the notes and workarounds mentioned on other issues by @hoporr, eg #3362451-18: [upstream] [Style] Allow CKEditor 5 to *create* a <h2 class="something"> directly (instead of first <h2>, then adding a class) (Comment #18 and #19).
Comment #4
jwilson3Another potential workaround, probably not worthy of adding to the issue summary is to use the CKEditor Templates module to create some templates containing Divs. Note: It currently needs the patch from #3273358: CKEditor 5 support for Content Templates to work well, however there is some unanswered question on comment #124 of issue #3273358 as to whether a recent change to Drupal 10.2 is also now stripping DIVs. Needs more testing and feedback.
Comment #5
wim leersThanks for creating this! 😊🙏
Comment #6
wim leersIndicating this is blocked on upstream.