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',
    ],
];

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?