CKEditor5 für REDAXO CMS

Hier kommt der CKEditor5 für REDAXO CMS.

Features nach Funktionsgruppen

Basis-Features

Ein leistungsstarker WYSIWYG-Editor mit moderner Oberfläche
Dark-Mode-Support für REDAXO >= 5.13
Platzhalter für alle Backend-Sprachen
Nur unterstützte Formate werden eingefügt

Konfiguration und Anpassung

Profilkonfigurator mit Drag&Drop für einfaches Zusammenklicken von Profilen
Expertenmodus: Entwickle Profile frei im Quellcode
Zusätzliche Optionen zur individuellen Anpassung des Editors
Konfigurationsseite für Lizenzschlüssel zum Entfernen des "Powered by CKEditor" Banner
API für programmatische Profilgenerierung

Style-Management

Style-Manager zur einfachen Verwaltung von CSS-Stilen
Style-Gruppen für schnelles Erfassen von Stilen als JSON-Array
CSS-Definitionen aus jedem Stil werden im Backend automatisch hinzugefügt
Eigene Schriften können integriert und verwaltet werden
Verbessertes Tag-Handling im Profil- und Style-Editor

Medienintegration

Bild-Upload in den Medienpool per Drag & Drop direkt ins Textfeld
Bild-Upload-Kategorie pro Profil einstellbar
Medienmanager-Typ je Profil einstellbar
Drag & Drop Upload für CKEditor Vendor-Dateien (konfigurierbar in config.php)

Link-Features

Umfassendes REDAXO Link-Widget
Linkmap-Support
YForm-Datasets Integration
Tel: und Mailto: Links
Medienlinks
Eigene Link-Decorators für benutzerdefinierte Attribute und Klassen

Erweiterungen und Plugins

Alle kostenlosen Anbieter-Plugins sind integriert
Sprog-Ersetzungen via Mentions-Plugin
AccessibilityHelper für verbesserte Barrierefreiheit
Einfügen von Klartext
Transformationen: z.B. Umwandlung von (c) in ©
Auswahl für Sonderzeichen
Neue Toolbar-Elemente: Emoji, Bookmarks, ShowBlocks

Import und Export

Profil-Export und -Import für einfache Migration
Datensicherung vor Updates
Konsistente Style-Übertragung zwischen Installationen

Style-Gruppen verwenden

Style-Gruppen ermöglichen es, mehrere CSS-Stile als JSON-Array zu definieren und sie gemeinsam zu verwalten. Diese Funktion wurde in Version 6.3.3 eingeführt und vereinfacht die konsistente Gestaltung deiner Inhalte.

Beispiel einer Style-Gruppe

Unter "CKEditor5" > "Profiles" > "Customise" > "Style Groups" kannst du Style-Gruppen erstellen:

[
    {
        "name": "Blue Box",
        "element": "div",
        "classes": ["blue-box", "rounded", "shadow"]
    },
    {
        "name": "Highlighted Text",
        "element": "span",
        "classes": ["highlight", "bold"]
    },
    {
        "name": "Info Panel",
        "element": "section",
        "classes": ["info-panel"],
        "attributes": {
            "data-type": "info",
            "role": "note"
        }
    }
]

So verwendest du Style-Gruppen:

Erstelle eine Style-Gruppe mit der JSON-Konfiguration
Optional: Füge direkt CSS-Definitionen hinzu, die automatisch im Backend geladen werden
Aktiviere das "Style"-Tool in deinem Editor-Profil
Wähle deine erstellte Style-Gruppe im Profileditor aus

Vorteile:

Konsistente Gestaltung über verschiedene Profile hinweg
Zentrale Verwaltung von zusammengehörigen Stilen
Automatische CSS-Integration im Backend
Einfacher Export/Import zwischen REDAXO-Instanzen

CSS-Definitionen für Style-Gruppen

Du kannst direkt CSS zu deinen Style-Gruppen hinzufügen:

.blue-box {
    background-color: #e7f5ff;
    border: 1px solid #4dabf7;
    padding: 15px;
}

.blue-box.rounded {
    border-radius: 8px;
}

.highlight {
    background-color: #fff9db;
    padding: 2px 4px;
}

.info-panel {
    border-left: 4px solid #1c7ed6;
    background: #f8f9fa;
    padding: 10px 15px;
    margin: 15px 0;
}

Eine kleine Demo

Der Profil-Editor

Konfiguriere deinen Editor so, wie du ihn brauchst.

Code-Beispiele, damit's auch läuft

Allgemeine Verwendung:

Eingabe-Code

 <textarea class="form-control cke5-editor" data-profile="default" data-lang="<?php echo \Cke5\Utils\Cke5Lang::getUserLang(); ?>" name="REX_INPUT_VALUE[1]">REX_VALUE[1]</textarea>

Ausgabe-Code

REX_VALUE[id="1" output="html"]

Über weitere Data-Attribute kannst du die Minimal- und Maximalhöhe sowie die Sprache steuern:

data-max-height
data-min-height
data-lang

Verwendung in YForm

Im individuellen Attribute-Feld: {"class":"cke5-editor","data-profile":"default","data-lang":"de"}
Weitere Attribute lassen sich durch Kommas trennen

Verwendung in MForm

$mform = new MForm();
$mform->addTextAreaField(1,
        array(
        'label'=>'Text',
        'class'=>'cke5-editor',
        'data-lang'=>\Cke5\Utils\Cke5Lang::getUserLang(),
        'data-profile'=>'default')
        );
echo $mform->show();

Verwendung mit MBlock

$id = 1;
$mform = new MForm();
$mform->addFieldset('Accordion');
$mform->addTextField("$id.0.titel", array('label'=>'Titel'));
$mform->addTextAreaField("$id.0.text",
        array(
        'label'=>'Text',
        'class'=>'cke5-editor',
        'data-lang'=>\Cke5\Utils\Cke5Lang::getUserLang(),
        'data-profile'=>'default')
        );
echo MBlock::show($id, $mform->show());

Eigene Schriften einbinden

Damit die Schriften im Backend angezeigt werden, musst du sie als Assets laden. Das kannst du z.B. in der boot.php des Projekt-AddOns oder in der backend.css des Theme-AddOns machen. Die Schriften kommen in den Abschnitt FontFamily des Profil-Editors, in der gewohnten CSS-Schreibweise.

Sprog-Ersetzungen – kurz und knackig

Unter Mention & Sprog Ersetzungen > Sprog Ersetzungen > Ersetzungen kannst du Sprog-Platzhalter mit Titel oder Beschreibung hinterlegen. Schreibweise: {{key}}. Im nächsten Feld kommt der Titel. Im Editor einfach '{{' eintippen, dann bekommst du eine Liste der Platzhalter.

Individualisierung – mach's zu deinem Editor

Die Optik des Editors kann per CSS an die Frontend-Ausgabe angepasst werden. Dafür gibt's im Ordner assets/addons/cke5_custom_data eine CSS-Datei.

CSS Content-Styles

Styleguide hier

Den Styles wird das Präfix .ck-content vorangestellt. Die Klasse sollte dem Ausgabeelement hinzugefügt werden und die mitgelieferte cke5_content_styles.css aus dem Asset-Ordner geladen werden.

Nach der Installation dieses AddOns ist die CSS-Datei /assets/addons/cke5/cke5_content_styles.css sofort einsatzbereit. Aber eine eigene Datei zu erstellen, ist vielleicht die bessere Wahl.

CKE im Frontend

Schau mal hier: REDAXO Tricks

Tastenkürzel

Hier die wichtigsten Tastenkürzel für CKEditor 5 und seine Features:

Aktion	PC	Mac
Kopieren	`Strg` + `C`	`⌘` + `C`
Einfügen	`Strg` + `V`	`⌘` + `V`
Rückgängig	`Strg` + `Z`	`⌘` + `Z`
Wiederherstellen	`Strg` + `Y` `Strg` + `Umschalt` + `Z`	`⌘` + `Y` `⌘` + `Umschalt` + `Z`
Fett	`Strg` + `B`	`⌘` + `B`
Kursiv	`Strg` + `I`	`⌘` + `I`
Link	`Strg` + `K`	`⌘` + `K`
Harter Zeilenumbruch (z.B. neuer Absatz)	`Enter`
Weicher Zeilenumbruch (`<br>`)	`Umschalt` + `Enter`
Aktuellen Listeneintrag einrücken (wenn man sich in einer Liste befindet)	`Tab`
Wenn ein Widget ausgewählt ist (z.B. Bild, Tabelle, horizontale Linie usw.)
Neuen Absatz direkt nach einem Widget einfügen	`Enter`
Neuen Absatz direkt vor einem Widget einfügen	`Umschalt` + `Enter`
Den Cursor anzeigen, um direkt vor einem Widget schreiben zu können	`↑` / `←`
Den Cursor anzeigen, um direkt nach einem Widget schreiben zu können	`↓` / `→`
In einer Tabellenzelle
Die Auswahl zur nächsten Zelle verschieben	`Tab`
Die Auswahl zur vorherigen Zelle verschieben	`Umschalt` + `Tab`
Neue Tabellenzeile einfügen (wenn man sich in der letzten Zelle einer Tabelle befindet)	`Tab`
Durch die Tabelle navigieren	`↑` / `→` / `↓` / `←`

Benutzeroberfläche und Navigation

Mit diesen Tastenkürzeln navigierst du effizienter durch die CKEditor 5 Oberfläche:

Aktion	PC	Mac
Kontext-Ballons und UI-Komponenten wie Dropdowns schließen	`Esc`
Fokus zum sichtbaren Kontext-Ballon verschieben	`Tab`
Fokus zwischen Feldern (Eingabefelder und Buttons) in Kontext-Ballons verschieben	`Tab`
Fokus zur Toolbar verschieben	`Alt` + `F10`	`Alt` + `F10` (kann `Fn` erfordern)
Durch die Toolbar navigieren	`↑` / `→` / `↓` / `←`
Die aktuell fokussierte Schaltfläche ausführen	`Enter`

Für Entwickler

Beispiel für Extra-Optionen

{
    "removePlugins": ["Autoformat"],
    "heading": {
        "options": [{
                "model": "paragraph",
                "title": "Paragraph",
                "class": "ck-heading_paragraph"
            },
            {
                "model": "paragrap1tl",
                "view": {
                    "name": "span",
                    "classes": "uk-text-large"
                },
                "title": "Fließtext groß",
                "class": "ck-heading_paragraph"
            },
            {
                "model": "heading1",
                "view": {
                    "name": "h1",
                    "classes": "uk-animation-fade uk-heading-large"
                },
                "title": "Überschrift 1 sehr groß",
                "class": "ck-heading_heading1"
            }

        ]
    }
}

Beispiel für benutzerdefinierte Link-Dekorator

Wichtig: Die Keys müssen klein geschrieben werden

[{
    "newtab": {
        "mode": "manual",
        "label": "In neuem Tab öffnen",
        "attributes": {
            "target": "_blank",
            "rel": "noopener noreferrer"
        }
    }
}]

[{
    "arrowclass": {
        "mode": "manual",
        "label": "Link mit CSS Klasse",
        "defaultValue": "true",
        "classes": "arrow"
    }
}]

Oder mehrere:

[{
    "openInNewTab": {
        "mode": "manual",
        "label": "In neuem Tab öffnen",
        "defaultValue": true,
        "attributes": {
            "target": "_blank",
            "rel": "noopener noreferrer"
        }
    }
},
{
    "isGallery": {
        "mode": "manual",
        "label": "Gallery link",
        "attributes": {
            "class": "button light",
        }
    }
}]

Mentions

Das AddOn liefert das Mentions-Plugin mit. Das kannst du frei konfigurieren. Hier ein Beispiel:

[{
    "marker": "@",
    "feed": [
        "@test",
        "@test2"
    ],
    "minimumCharacters": "0"
}]

YForm-Links

Um generierte URLs wie rex_news://1 zu ersetzen, füge das folgende Skript in die boot.php des project AddOns ein. Der Code für die URLs muss angepasst werden.

rex_extension::register('OUTPUT_FILTER', function(\rex_extension_point $ep) {
    return preg_replace_callback(
        '@((rex_news|rex_person))://(\d+)(?:-(\d+))?/?@i',
        function ($matches) {
            // table = $matches[1]
            // id = $matches[3]
            $url = '';
            switch ($matches[1]) {
                case 'news':
                    // Beispiel, wenn die URLs via Url-AddOn generiert werden
                    $id = $matches[3];
                    if ($id) {
                       return rex_getUrl('', '', ['news' => $id]);
                    }
                    break;
                case 'person':
                    // Ein anderes Beispiel
                    $url = '/index.php?person='.$matches[3];
                    break;
            }
            return $url;
        },
        $ep->getSubject()
    );
}, rex_extension::NORMAL);

Profile API

Über die API kannst du eigene Profile abseits des Profileditors erstellen: Cke5\Creator\Cke5ProfilesApi::addProfile

Beispiel:

    $create = \Cke5\Creator\Cke5ProfilesApi::addProfile(
        'profile_name_cke5',
        'API created Cke5 profile',
        '{
           "toolbar": ["link", "rexImage", "|", "undo", "redo", "|", "selectAll", "insertTable", "code", "codeBlock"],
           "removePlugins": ["Alignment", "Font", "FontFamily", "MediaEmbed", "Bold", "Italic", "BlockQuote", "Heading", "Alignment", "Highlight", "Strikethrough", "Underline", "Subscript", "Superscript", "Emoji", "RemoveFormat", "TodoList", "HorizontalLine", "PageBreak"],
           "link": {"rexlink": ["internal", "media"]},
           "image": {
             "toolbar": ["imageTextAlternative", "|", "imageStyle:full", "imageStyle:alignLeft", "imageStyle:alignRight", "imageStyle:alignCenter"],
             "styles": ["block", "alignLeft", "alignRight", "alignCenter"]
           },
           "table": {"toolbar": ["tableColumn", "tableRow", "mergeTableCells", "tableProperties", "tableCellProperties"]},
           "rexImage": {"media_path": "\/media\/"},
           "ckfinder": {"uploadUrl": ".\/index.php?cke5upload=1&media_path=media"},
           "placeholder_en": "Placeholder EN",
           "placeholder_de": "Placeholder DE",
           "codeBlock": {
             "languages": [{"language": "plaintext", "label": "Plain text", "class": ""}, {
               "language": "php",
               "label": "PHP",
               "class": "php-code"
             }]
           }
         }',
        '[{"min-height": 100}, {"max-height": 280}]'
    );
    echo (is_string($create)) ? $create : 'successful profile created';

HTML-Support

Source-Editing Plugin hat ein Update bekommen. Nach einem Update von einer sehr alten Version fehlt evtl. die Grundeinstellung für das PlugIn im Abschnitt HtmlSupport.

[
    {
        "name": "regex(/.*/)",
        "attributes": true,
        "classes": true,
        "styles": true
    }
]

Autoformat deaktivieren

Du kannst das Autoformat-Feature (Markdown-Code-Ersatz) deaktivieren, indem du diese Option in den Abschnitt Extra Options einfügst:

{"removePlugins": ["Autoformat"]}

Bugtracker

Fehler gefunden oder eine Idee? Erstelle ein Issue. Bevor du ein neues Issue erstellst, such bitte, ob es schon ein ähnliches gibt. Und lies dir die Issue Guidelines (englisch) von Nicolas Gallagher durch.

Changelog

Schau mal im CHANGELOG.md nach.

Lizenzen

AddOn: MIT LICENSE CKEDITOR: GPL LICENSE

Wer's gemacht hat

Friends Of REDAXO

Projektleitung

Joachim Dörr

Initiator:

KLXM Crossmedia / Thomas Skerbis

FilesExpand file tree

README.de.md

Latest commit

History