Introduce support for div element, and other containers article , section, etc.

[piernik]

I'm very happy with Your work and I do support You.
But I do think that we miss div support in editor.
Div's (with classes) are common blocks in building articles - I think we need them.
You provide many features that supports only article editing but not CMS as a whole.
For CMS we need DIVs inside DIVs, classes and even custom styles for elements.
Make it easy to implement and we can move from CK 4 to CK5.

[Edited by @Witoso ]

Currently, the editor doesn't have a support for the div element. This is an issue to gather the interest.

This is often asked in context of escaping a div (paragraph before/after), which is currently not possible. CKEditor 4 had a "Special container" style and a magic line that provided an ability to add a paragraph after a div.

We need to remember about the usage of a div in two contexts:

<!-- Paragraph-like div -->
<div>This is a text.</div>

<!-- Container div -->
<div>
  <p>This is a text.</p>
</div>

Additionally, we could make a container configurable or aware of other HTML markup, like article, section. To be decided, but this would make it more interesting and could satisfy more use cases.

---

If you'd like this feature to be implemented, react with 👍 to this post.

[Mgsy]

Hi! Thanks for the report. I will confirm it as a valid feature request.

[piernik]

I believe htmlEmbed plugin https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html is a solution. Not perfect...

[Mgsy]

I will keep this feature request open, as some users might be still interested in introducing div element to CKEditor 5.

[neongreen]

Transfering from #8611:

@neongreen:

Most of the time an inline HTML block is an overkill, and I rather want to wrap existing content in a div with a class/id (for styling), or something along those lines.

If user-submitted JS is allowed (e.g. if CKEditor is used in a site builder, which is my usecase), then it also makes sense to add arbitrary HTML elements like <canvas> or <input> that the user can use for small JS demos.

I made a sketch of how this could look.

---

@Reinmar:

I was indeed thinking about making it more generic than just for div elements. Also, it should be relatively simple if this is implemented as a widget. Maybe only for stuff like <canvas> that need to be rendered differently. In this case, the HTML embed feature would actually handle that: https://ckeditor.com/docs/ckeditor5/latest/features/html-embed.html.

[wimleers]

This is extremely frequently requested in Drupal. In particular, many Drupal sites use the pattern (very widely adopted among Drupal + CKEditor 4 sites) of:

1. selecting some elements
2. choosing some kind of <div class="something"> container in the StylesCombo dropdown (Style in CKE5)
3. have their selection wrapped in <div class="something">

For sites that have deeply entrenched workflows and content authoring based on this … this is a hard blocker for them to adopt CKEditor 5!

Related Drupal.org issue: https://www.drupal.org/project/drupal/issues/3362451

[crowjake]

What Wim said!

In addition to the ability to style div-like elements, many of those we mention are also semantic elements. E.g. our content regularly uses sidebars where an <aside> element is ideal. Semantic html elements like that are a potential accessibility feature and a way of denoting document structure, non-visually whether by search engines or screen readers. It also makes classless theming more of a viable possibility.

Right now though, I just want to provide aside and style it as a sidebar, however, currently the only ways to do that are:

1. source editing
2. using a heavily patched pre-release drupal module with a dialog (instead of it just being available alongside paragraph, h2, h3 etc.)
3. writing my own tokens and javascript/php conversions to be performed on load

(I'm doing 2 at the moment, benefiting from some great work of developers more talented than I)

Anyway, simply being able to place an aside element (which does a very similar job to a heading or a paragraph element; namely, indicating structure) or indeed divs with classes would be sooooo much easier, and more importantly a more trustworthy process instead of every one of us reinventing the wheel with varying degrees of hacky-ness to achieve very similar outcomes.

[jameswilson]

@crowjake I'm interested in your "heavily patched pre-release Drupal module". Do you have a link or more context on what you're doing?

Also, some folks have spun out a new Drupal.org issue that more cleanly maps to this one, since the original purpose of the issue Wim mentioned above was for Headings which is now resolved.

#3418322: Allow CKEditor 5 support for containers: div, article, section, aside, etc.

Your feedback and workarounds are welcome there.

[crowjake]

@jameswilson None of it is my work, but basically this badboi: #3273358: CKEditor 5 support for Content Templates - I don't know how the latest patches compare to what I'm using but at least the versions I've installed provide a UI for inserting whatever html you want, with whatever attributes and 'magic line' wrapper elements that help us avoid the 'trapped cursor' problem - although it is a bit disconcerting using a module in production that doesn't officially support CKEeditor 5 at all (yet), and has prevented me being able to do minor Drupal 10.x upgrades with confidence (I have too many things on my to do list to do adequate testing). Even if the work people have done on the patches so far are clearly awesome.

[sagar-lcm]

Are there any plans to get this included yet? We are also using the Ckeditor template module's patch in Drupal along with Ckeditor5 it's very cumbersome even with the workarounds to add the templates between two templates. We hope support for div and other containers gets included soon.

[fiasco]

We've started to use Templates in Drupal to help inject <div> elements when we need them. However, its possible to inject a <div> based template and then not be able to get your cursor below the template to continue to add non-templated content (or more templated content for that matter).

We noticed that tables were injected with a <figure> element wrapped around them and this appears to provide UI buttons to inject <p> elements above or below the table to allow the user to continue to add content. We tried doing this with Templates but it doesn't work.

It would be great if the Templates plugin could support <div> based elements with the same "new line" feature given to widgets like tables. That would be fairly close to complete solution for us.

[joshuami]

I'd like to upvote the ability to select block level elements (<div>, <article>, <section>, etc.) and when selected apply a style and/or present the widget wrap around handles.

This would be a huge benefit when combined with templates. In the Drupal world, it would potentially reduce the need for complicated layout building experiences (Paragraphs, Layout Builder, etc.) for a huge number of sites.

[Badlapje]

Adding my support for this. We currently use the templates plugin and the embed html plugin to achieve this, but the UX of that is well below 0. All but the most savvy users keep struggling or are entirely unable to do this.

Ideally you could select the element to add as a wrapper & which classes to apply.