RTE CKEditor Image - Netresearch TYPO3 Demo

CKEditor TYPO3 v14 Open Source

Bilder im CKEditor 5, ohne Umwege

Block-Bilder, Inline-Bilder, Klick zum VergrÃ¶ÃŸern und verlinkte Bilder â€” alles direkt im Rich Text Editor von TYPO3, ohne eigenes Inhaltselement.

GitHub TER Packagist

Block-Bilder

EigenstÃ¤ndige Bilder mit Bildunterschrift und Ausrichtung. Sie laufen durch die TYPO3-Bildverarbeitung und bekommen ein responsives srcset.

Inline-Bilder

Bilder, die im Textfluss mitlaufen â€” Icons, Logos und kleine Illustrationen mitten im Absatz.

Klick zum VergrÃ¶ÃŸern

Lightbox-Popup Ã¼ber data-htmlarea-zoom. Ein Klick auf das Bild Ã¶ffnet die volle AuflÃ¶sung.

Live-Demos

Block-Bild

Ein eigenstÃ¤ndiges Bild, im CKEditor eingefÃ¼gt und mit responsivem srcset ausgegeben:

Teamfoto (Demo)

Inline-Bild im Text

Text kann Inline-Bilder enthalten, etwa dieses Inline-Logo Logo, das ganz normal im Absatz mitlÃ¤uft.

FÃ¼r Integratoren: Diese Seite im TYPO3-Backend Ã¶ffnen â€” dann zeigt sich die Bild-SchaltflÃ¤che in der CKEditor-Toolbar. Alle Bilder oben stecken im Rich Text, nicht in einem Bild-Inhaltselement.

Klick zum VergrÃ¶ÃŸern (Lightbox) â€” Live-Demo

Ein Klick auf das Bild unten Ã¶ffnet das Zoom-Popup. Weil dies ein normales Text-Element ist, lÃ¤uft sein Rich Text durch lib.parseFunc_RTE â€” und erst dadurch macht rte_ckeditor_image aus dem data-htmlarea-zoom-Bild einen Link zum VergrÃ¶ÃŸern: