Problem/Motivation

Container HTML tags like DIV, ARTICLE, ASIDE, SECTION, and so on that wrap multiple P tags (and other block level tags) are currently not supported due to lack of upstream support.

This is a follow up to: #3362451: [upstream] [Style] Allow CKEditor 5 to *create* a <h2 class="something"> directly (instead of first <h2>, then adding a class)

Steps to reproduce

  1. Create a node with a CKEditor 5 body field.
  2. Try to wrap a group of paragraphs in a DIV and optionally try to apply a stylistic class to that DIV.
  3. It cannot be done without using Source mode. In some configurations of CKEditor, the div is stripped out when switching out of Source mode.

Proposed resolution

  1. Give a thumbs up to the upstream issue here: CKEditor 5: Introduce support for div element, and other containers article , section, etc. #6462. If upstream support is available some day, it would eventually be included with Drupal core's packaged CKEditor 5.
  2. As a hack-around, write a Drupal integration for the htmlEmbed plugin. The HTML embed feature lets you embed any HTML snippet in your content. The feature is meant for more advanced users who want to directly interact with HTML fragments. It is therefore not a perfect workaround for mose use cases.
  3. 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

rgpublic created an issue. See original summary.

hoporr’s picture

Title: Introduce support for div element, and other containers article , section, etc. » Introduce CKEditor 5 support for div element, and other containers article , section, etc.

Thank 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.

jwilson3’s picture

Title: Introduce CKEditor 5 support for div element, and other containers article , section, etc. » [upstream] Allow CKEditor 5 support for containers: div, article, section, aside, etc.
Issue summary: View changes

I'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).

jwilson3’s picture

Issue summary: View changes

Another 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.

wim leers’s picture

Title: [upstream] Allow CKEditor 5 support for containers: div, article, section, aside, etc. » [upstream] [GHS] Allow CKEditor 5 support for containers: div, article, section, aside, etc.
Issue tags: +Needs upstream feature
Related issues: +#3362451: [upstream] [Style] Allow CKEditor 5 to *create* a <h2 class="something"> directly (instead of first <h2>, then adding a class)

Thanks for creating this! 😊🙏

wim leers’s picture

Status: Active » Postponed

Indicating this is blocked on upstream.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.