TYPO3 v12+, CKEditor 5: simple plugin that allows to <div> elements as wrappers around paragraphs. Not yet editor-friendly, though.

Custom.yaml

# CKEditor 5 configuration in TYPO3 (excerpt)
imports:
    - { resource: 'EXT:rte_ckeditor/Configuration/RTE/Processing.yaml' }
    - { resource: 'EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml' }
    - { resource: 'EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml' }

editor:
  config:
    importModules:
      - '@yourvendor/ckeditor-div'

    heading:
      options:
        - { model: 'paragraph', title: 'Paragraph' }
        - { model: 'heading1', view: 'h1', title: 'Heading 1' }
        - { model: 'heading2', view: 'h2', title: 'Heading 2' }
        - { model: 'heading3', view: 'h3', title: 'Heading 3' }
        - { model: 'heading4', view: 'h4', title: 'Heading 4' }
        - { model: 'formatted', view: 'pre', title: 'Pre-Formatted Text' }
        - { model: 'div', view: 'div', title: 'Div' }

    style:
      definitions:
        # block level styles
        - { name: 'Info alert (p)', element: 'p', classes: ['c-alert', 'c-alert--info'] }
        - { name: 'Info alert (div)', element: 'div', classes: ['c-alert', 'c-alert--info'] }
        - { name: 'Attention alert (p)', element: 'p', classes: ['c-alert', 'c-alert--attention'] }
        - { name: 'Attention alert (div)', element: 'div', classes: ['c-alert', 'c-alert--attention'] }
        - { name: 'Warning alert (p)', element: 'p', classes: ['c-alert', 'c-alert--warning'] }
        - { name: 'Warning alert (div)', element: 'div', classes: ['c-alert', 'c-alert--warning'] }

div.js

import {Core, UI} from "@typo3/ckeditor5-bundle.js";

// This plugin allows to use <div> elements as wrappers around paragraphs.
export default class DivElement extends Core.Plugin {
    static pluginName = 'DivElement';

    init() {
        const editor = this.editor;
        const model = editor.model;
        const view = editor.view;

        model.schema.extend('div', {allowIn: '$root'});
        model.schema.extend('paragraph', {allowIn: 'div'});

        editor.conversion.for('upcast').elementToElement({model: 'div', view: 'div'});
    }
}

JavaScriptModules.php

<?php

return [
    'dependencies' => ['backend'],
    'tags' => [
        'backend.form',
    ],
    'imports' => [
        '@yourvendor/ckeditor-div' => 'EXT:your_sitepackage/Resources/Public/JavaScript/CKEditor/div.js',
    ],
];

@klodeckl What does "two divs" mean? One div around the selected elements, and the second ...???

The output will be:

<div class="box">
<div class="box-content">
Content from RTE here
</div>
</div>

Ah, oh, okay - thanks. 😄

@klodeckl: Thank you so much for sharing this long awaited code!
Maybe I'm wrong, but is it true, that other classes, defined in my editor.yaml don't appear in the styles-dropdown and it's not possible to add them manually in source-code view?

Where do you want to put additional classes? If in one of the two divs you have to adjust the plugin.

Clicking on the edge of the div, it seems that the div is selected, but classes for divs are not present in the style-dropdown. Switching to cource-code-view, manually added classes are removed.

In my editor.yaml I allow div with classes and styles
{ name: 'div', attributes: true, classes: true, styles: { pattern: '/^style.*$/' } },
so I can add the div-tag in source-code-view.
For Editors it would be much easier if they could choose/append a class for the div, added with your button and code (like they can do for other tags like p).

How can I adjust your plugin in order to make this possible?

@klodeckl (And Sebastian) Thank you for providing your code. I have used it like this:

in yaml file:

editor:
  config:
    importModules:
      - '@uniol/ckeditor-divbutton'

    toolbar:
      items:
        - insertBox

The button (with retangle icon) is added to the toolbar. And it inserts a div (or rather 2 as mentioned) into the ckeditor area into which you can then insert additional content.

What I understood from @artus70 however was the request to be able to select some text in the ckeditor area (e.g. several p elements), then click the button and it would then wrap a div around it (similar to the mentioned blockQuote). Is this possible with your plugin? I did not see a way to do this.

Also, it is possible to pass the classname in your code:

constructor(editor, className = '') {

I do not know to provide the className.

It would be great if someone could provide this but the code is already helpful as is.

In order to add the selected elements to the div, I added this in model.change after const contentElement = writer.createElement('boxContent');:

// DocumentSelection
const selection = writer.model.document.selection;
// getSelectedBlocks() → IterableIterator<Element>
const blocks = selection.getSelectedBlocks();
if (blocks != 'undefined') {
    for ( const node of blocks ) {
        if (node != undefined && typeof node._clone === 'function') {
            const clone = node._clone(true);
            writer.append(clone, contentElement);
        }
      }
    }

and removed this:

-      // Beispielinhalt für das "boxContent" Element
-      const paragraph = writer.createElement('paragraph');
-      writer.append(writer.createText(''), paragraph);
-      writer.append(paragraph, contentElement);

Tested this with several selected p-elements.