Contrib.social

[upstream] [GHS] Allow CKEditor 5 support for containers: div, article, section, aside, etc.

Open on Drupal.org →
Created on 31 January 2024, 10 months ago
Updated 13 February 2024, 10 months ago

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: ✨ [upstream] [Style] Allow CKEditor 5 to *create* a directly (instead of first , then adding a class) Needs work

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.
✨ Feature request
Status

Postponed

Version

11.0 🔥

Component
CKEditor 5  →

Last updated 2 days ago

Created by

🇩🇪Germany rgpublic Düsseldorf 🇩🇪 🇪🇺

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024