CKEditor 5
Seit TYPO3 v12 ist der CKEditor 5 das Standard-Werkzeug für die Textpflege.
Die EXT:t3sbootstrap bietet eine breite Palette von Bootstrap Utility-Klassen, um z.B. die Abstände oder Farben eines Elements anzupassen.
5.3.51 Die Toolbar hat vier neue Werkzeuge bekommen: Columns, Margin, Badge und Code-Block – dazu Schalter, mit denen sich einstellen lässt, was Redakteuren überhaupt angeboten wird. Badges sind dabei aus der Styles-Auswahl ausgezogen: die 16 Einträge „Badge *“ und „Pill Badge *“ stecken jetzt in einem einzigen Dropdown. Details weiter unten.
Das Alert-Dropdown mit allen acht Bootstrap-Varianten gibt es seit 5.3.50.
Neu in 5.3.51 Vier neue Werkzeuge in der Toolbar
Columns
Legt eine Bootstrap-Row mit 2, 3 oder 4 Spalten an, wandelt eine vorhandene Row in eine andere Spaltenzahl um oder entfernt sie wieder. Überzähliger Inhalt wandert dabei in die letzte verbleibende Spalte, statt verloren zu gehen. Beim Bearbeiten markiert eine dünne Linie die Spalten – im Frontend ist davon nichts zu sehen.
Margin
Die Bootstrap-Abstände mt-1…mt-5 und mb-1…mb-5 für den Block, in dem der Cursor steht. Oben und unten sind unabhängig voneinander und lassen sich kombinieren, none setzt eine Seite zurück.
Badge
Die acht Bootstrap-Farben, jede als Badge und als Pill – ein Dropdown für beides, No badge entfernt die Auszeichnung wieder. Vorher waren das 16 Einträge in der Styles-Auswahl; das Markup ist unverändert geblieben, vorhandene Badges brauchen also keine Migration.
Code-Block
<pre><code> mit Sprachauswahl – TypoScript, PHP, YAML, JSON, XML, HTML, CSS, SCSS, JavaScript, Bash, SQL. Der Button Code für eine Inline-Auszeichnung daneben funktioniert jetzt ebenfalls. Dieselbe Einstellung wählt auch das Prism-Theme, das die Blöcke im Frontend einfärbt – siehe unten.
Beispiel: 2-Spalter aus dem RTE
Dieser Abschnitt ist genau so entstanden: Cursor in den Text, im Dropdown Columns den Eintrag 2 Spalten gewählt, fertig. Kein zweites Inhaltselement, kein Container – die Spalten liegen im Bodytext.
Linke Spalte
Der Inhalt einer Spalte verhält sich wie normaler Fließtext: Überschriften, Listen, Links, sogar ein Alert oder ein Code-Block lassen sich hineinsetzen.
Unterhalb des md-Breakpoints stapeln sich die beiden Spalten untereinander – genau wie bei den mehrspaltigen Inhaltselementen der Extension. Auf dem Handy steht diese Spalte also über der rechten.
Rechte Spalte
Beim Bearbeiten markiert eine dünne graue Linie die Spaltengrenze, damit im Editor erkennbar bleibt, wo die eine Spalte aufhört und die nächste beginnt. Im Frontend ist davon nichts zu sehen.
Über dasselbe Dropdown lässt sich die Row später auf drei oder vier Spalten umstellen oder wieder auflösen. Wird dabei verkleinert, wandert der Inhalt der wegfallenden Spalten in die letzte verbleibende – er geht nicht verloren.
Beispiel: icon-link und icon-link-hover
Der Bootstrap-Helper .icon-link setzt Text und Icon in eine Zeile, richtet sie aneinander aus und hält einen festen Abstand dazwischen. Mit .icon-link-hover wandert das Icon beim Darüberfahren ein Stück nach rechts. Beide Klassen sind seit 5.3.51 im Link-Wizard des RTE auswählbar.
Nur icon-link – das Icon bleibt stehen
Mit icon-link-hover – hier mit der Maus drüber
Zwischen Text und Icon kein Leerzeichen setzen: .icon-link ist ein inline-flex mit eigenem gap – ein zusätzliches Leerzeichen würde den Abstand verdoppeln.
5.3.51 Bootstrap knüpft den Hover-Effekt an sein eigenes Icon-Font: die Regel gilt nur für .icon-link > .bi. Iconpack rendert je nach Render-Typ aber ein <svg>, ein <i> oder ein <img> – nie ein .bi, und deshalb ist beim Hover bisher nichts passiert. t3sbootstrap bringt dieselben Deklarationen jetzt zusätzlich für diese Elemente mit, damit der Effekt unabhängig vom Render-Typ funktioniert.
Wenn du im CKEditor Icons (z.B. von Bootstrap oder Font Awesome etc.) nutzen möchtest, kann ich die EXT:iconpack empfehlen
Beispiel: Alert-Boxen
Sechs der acht Bootstrap-Varianten, gesetzt über das Dropdown Alert und verteilt auf zwei Dreispalter aus dem Dropdown Columns – alles im selben Inhaltselement, ohne Container drumherum.
Primary.alert-primary
Der Hinweis, der zum Thema der Seite gehört.
Success.alert-success
Etwas hat geklappt oder ist so richtig.
Info.alert-info
Beiläufige Ergänzung, die niemand lesen muss.
Warning.alert-warning
Vorsicht – hier kann etwas schiefgehen.
Danger.alert-danger
Fehler, Datenverlust, kein Zurück.
Secondary.alert-secondary
Zurückhaltend, wenn Farbe zu laut wäre.
Dazu kommen .alert-light und .alert-dark – das Dropdown bietet alle acht an.
Das Markup einer Box:
<div class="alert alert-primary">
<p>Der Hinweis, der zum Thema der Seite gehört.</p>
</div>Eine Alert-Box ist ein echter Block: Listen, Links, Überschriften oder ein Code-Block lassen sich hineinsetzen. Steht sie am Ende des Feldes, kommst du mit Enter auf einer leeren letzten Zeile wieder heraus.
Code-Block: Syntax-Highlighting und Theme
Der Code-Block schreibt <pre><code class="language-php"> – mehr nicht. Darin steht ein einziger Textknoten, es gibt kein Markup für Schlüsselwörter, Strings oder Kommentare. CSS allein kann daran nichts einfärben: die farbige Darstellung entsteht erst, wenn ein Highlighter im Frontend die <span>-Ebene erzeugt, die sein Theme dann anspricht. Im Editor selbst bleibt der Block bewusst ungefärbt – CKEditor hebt eigens hervor, dass Highlighting während des Bearbeitens nicht möglich ist.
t3sbootstrap bringt dafür Prism.js mit, in allen acht Themes, die der Downloader auf prismjs.com anbietet. Prism passt ohne Adapter: es erwartet genau die Konvention language-* auf dem <code> innerhalb eines <pre> – also exakt das, was der Editor ausgibt. Und es bringt eine TypoScript-Komponente mit; highlight.js hat die nicht, dort bliebe ausgerechnet diese Sprache ungefärbt.
Eine Einstellung für beides
In der Extension Configuration, Reiter RTE, ist Code block ein Auswahlfeld:
No code block
Code block without highlighting
Prism theme: Default
Prism theme: Dark
Prism theme: Coy
Prism theme: Funky
Prism theme: Okaidia
Prism theme: Solarized Light
Prism theme: Tomorrow Night
Prism theme: TwilightDer Toolbar-Button erscheint bei jedem Eintrag außer dem ersten. Ist ein Theme gewählt, und nur dann, hängt t3sbootstrap Resources/Public/Prism/<Theme>.css und die gemeinsame prism.js in die Seite. Die Engine liegt nur einmal da: sie hängt an der Sprachauswahl, nicht am Theme. Am Markup des Code-Blocks ist nichts zu ändern, Prism färbt von selbst.
Sprachen nachrüsten
Ein Prism-Bundle kennt nur die Sprachen, mit denen es gebaut wurde – die erste Zeile der Datei nennt sie. Reicht das nicht, lässt sich auf prismjs.com ein eigenes Bundle zusammenstellen und die beiden Dateien ersetzen. Wie das geht, steht auch in Resources/Public/Prism/README.md. Für alle zwölf Sprachen der Toolbar:
markup, css, clike, javascript, bash, json, markup-templating, php, scss, sql, typoscript, yaml
plaintext bleibt absichtlich ungefärbt, html und xml teilen sich markup, und clike ist keine eigene Sprache, sondern die Abhängigkeit von javascript.
Beim Zusammenstellen eine Stolperstelle: php setzt in Prism zwingend markup-templating voraus. Fehlt die Abhängigkeit, bricht Prism beim Laden ab – dann bleibt jeder Code-Block ungefärbt, nicht nur der mit PHP.
Deaktivieren
Bei Bedarf kannst du die Konfiguration von t3sbootstrap deaktivieren!
Seiten-TSconfig:
RTE.default.preset = default || minimal || full5.3.51 Neben t3sbootstrap gibt es ein zweites Preset: t3sbootstrap_extended. Derselbe Editor, aber mit einer breiteren Klassen-Whitelist – Klassen auf <p>, <span>, <a>, Listen und Tabellen bleiben unangetastet erhalten.RTE.default.preset = t3sbootstrap_extended
Das ist bewusst optional: die Whitelist wirkt auch als Paste-Filter, aus Word oder von fremden Webseiten kopierte Klassen überleben damit ebenfalls.
Custom CKEditor
Eigene Konfiguration registrieren
Anstatt den Standard zu nutzen registrierst du dein eigenes Profil in der ext_localconf.php deines Site-Packages:
$GLOBALS['TYPO3_CONF_VARS']['RTE']['Presets']['my_project'] = 'EXT:my_sitepackage/Configuration/RTE/Default.yaml';In der Default.yaml definierst du, welche HTML-Elemente und CSS-Klassen erlaubt sind.
Infos:
https://docs.typo3.org/m/typo3/reference-tsconfig/master/en-us/PageTsconfig/Rte.html