{"id":28633421,"url":"https://github.com/FriendsOfREDAXO/cke5","last_synced_at":"2025-06-12T15:08:39.449Z","repository":{"id":32291583,"uuid":"132173814","full_name":"FriendsOfREDAXO/cke5","owner":"FriendsOfREDAXO","description":"Integrates the CKEditor5 into REDAXO CMS","archived":false,"fork":false,"pushed_at":"2025-05-16T10:37:21.000Z","size":31764,"stargazers_count":54,"open_issues_count":6,"forks_count":7,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-05-16T11:33:14.042Z","etag":null,"topics":["addon","editor","editors","hacktoberfest","redaxo","redaxo-addon","wysiwyg"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FriendsOfREDAXO.png","metadata":{"files":{"readme":"README.de.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-05-04T18:10:51.000Z","updated_at":"2025-05-16T10:37:26.000Z","dependencies_parsed_at":"2023-01-14T20:55:05.000Z","dependency_job_id":"859779dd-51f6-4336-95df-de29de1c9aac","html_url":"https://github.com/FriendsOfREDAXO/cke5","commit_stats":null,"previous_names":[],"tags_count":53,"template":false,"template_full_name":null,"purl":"pkg:github/FriendsOfREDAXO/cke5","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fcke5","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fcke5/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fcke5/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fcke5/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FriendsOfREDAXO","download_url":"https://codeload.github.com/FriendsOfREDAXO/cke5/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FriendsOfREDAXO%2Fcke5/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259490549,"owners_count":22865767,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["addon","editor","editors","hacktoberfest","redaxo","redaxo-addon","wysiwyg"],"created_at":"2025-06-12T15:08:34.414Z","updated_at":"2025-06-12T15:08:39.426Z","avatar_url":"https://github.com/FriendsOfREDAXO.png","language":"PHP","funding_links":[],"categories":["Integrations"],"sub_categories":[],"readme":"# CKEditor5 für REDAXO CMS\n\nHier kommt der [CKEditor5](https://ckeditor.com) für REDAXO CMS.\n\n![Screenshot](https://raw.githubusercontent.com/FriendsOfREDAXO/cke5/assets/cke5.png)\n\n## Features nach Funktionsgruppen\n\n### Basis-Features\n- Ein leistungsstarker WYSIWYG-Editor mit moderner Oberfläche\n- Dark-Mode-Support für REDAXO \u003e= 5.13\n- Platzhalter für alle Backend-Sprachen\n- Nur unterstützte Formate werden eingefügt\n\n### Konfiguration und Anpassung\n- Profilkonfigurator mit Drag\u0026Drop für einfaches Zusammenklicken von Profilen\n- Expertenmodus: Entwickle Profile frei im Quellcode\n- Zusätzliche Optionen zur individuellen Anpassung des Editors\n- Konfigurationsseite für Lizenzschlüssel zum Entfernen des \"Powered by CKEditor\" Banner\n- API für programmatische Profilgenerierung\n\n### Style-Management\n- Style-Manager zur einfachen Verwaltung von CSS-Stilen\n- Style-Gruppen für schnelles Erfassen von Stilen als JSON-Array\n- CSS-Definitionen aus jedem Stil werden im Backend automatisch hinzugefügt\n- Eigene Schriften können integriert und verwaltet werden\n- Verbessertes Tag-Handling im Profil- und Style-Editor\n\n### Medienintegration\n- Bild-Upload in den Medienpool per Drag \u0026 Drop direkt ins Textfeld\n- Bild-Upload-Kategorie pro Profil einstellbar\n- Medienmanager-Typ je Profil einstellbar\n- Drag \u0026 Drop Upload für CKEditor Vendor-Dateien (konfigurierbar in config.php)\n\n### Link-Features\n- Umfassendes REDAXO Link-Widget\n- Linkmap-Support\n- YForm-Datasets Integration\n- Tel: und Mailto: Links\n- Medienlinks\n- Eigene Link-Decorators für benutzerdefinierte Attribute und Klassen\n\n### Erweiterungen und Plugins\n- Alle kostenlosen Anbieter-Plugins sind integriert\n- Sprog-Ersetzungen via Mentions-Plugin\n- AccessibilityHelper für verbesserte Barrierefreiheit\n- Einfügen von Klartext\n- Transformationen: z.B. Umwandlung von (c) in ©\n- Auswahl für Sonderzeichen\n- Neue Toolbar-Elemente: Emoji, Bookmarks, ShowBlocks\n\n### Import und Export\n- Profil-Export und -Import für einfache Migration\n- Datensicherung vor Updates\n- Konsistente Style-Übertragung zwischen Installationen\n\n## Style-Gruppen verwenden\n\nStyle-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.\n\n### Beispiel einer Style-Gruppe\n\nUnter \"CKEditor5\" \u003e \"Profiles\" \u003e \"Customise\" \u003e \"Style Groups\" kannst du Style-Gruppen erstellen:\n\n```json\n[\n    {\n        \"name\": \"Blue Box\",\n        \"element\": \"div\",\n        \"classes\": [\"blue-box\", \"rounded\", \"shadow\"]\n    },\n    {\n        \"name\": \"Highlighted Text\",\n        \"element\": \"span\",\n        \"classes\": [\"highlight\", \"bold\"]\n    },\n    {\n        \"name\": \"Info Panel\",\n        \"element\": \"section\",\n        \"classes\": [\"info-panel\"],\n        \"attributes\": {\n            \"data-type\": \"info\",\n            \"role\": \"note\"\n        }\n    }\n]\n```\n\n### So verwendest du Style-Gruppen:\n\n1. Erstelle eine Style-Gruppe mit der JSON-Konfiguration\n2. Optional: Füge direkt CSS-Definitionen hinzu, die automatisch im Backend geladen werden\n3. Aktiviere das \"Style\"-Tool in deinem Editor-Profil\n4. Wähle deine erstellte Style-Gruppe im Profileditor aus\n\n### Vorteile:\n- Konsistente Gestaltung über verschiedene Profile hinweg\n- Zentrale Verwaltung von zusammengehörigen Stilen\n- Automatische CSS-Integration im Backend\n- Einfacher Export/Import zwischen REDAXO-Instanzen\n\n### CSS-Definitionen für Style-Gruppen\n\nDu kannst direkt CSS zu deinen Style-Gruppen hinzufügen:\n\n```css\n.blue-box {\n    background-color: #e7f5ff;\n    border: 1px solid #4dabf7;\n    padding: 15px;\n}\n\n.blue-box.rounded {\n    border-radius: 8px;\n}\n\n.highlight {\n    background-color: #fff9db;\n    padding: 2px 4px;\n}\n\n.info-panel {\n    border-left: 4px solid #1c7ed6;\n    background: #f8f9fa;\n    padding: 10px 15px;\n    margin: 15px 0;\n}\n```\n\n## Eine kleine Demo\n\n![Screenshot](https://raw.githubusercontent.com/FriendsOfREDAXO/cke5/assets/ckeditor5_demo.gif)\n\n## Der Profil-Editor\n\nKonfiguriere deinen Editor so, wie du ihn brauchst.\n\n![Screenshot](https://raw.githubusercontent.com/FriendsOfREDAXO/cke5/assets/ckeditor_profile_editor_demo.gif)\n\n## Code-Beispiele, damit's auch läuft\n\n### Allgemeine Verwendung:\n\n### Eingabe-Code\n\n```php\n \u003ctextarea class=\"form-control cke5-editor\" data-profile=\"default\" data-lang=\"\u003c?php echo \\Cke5\\Utils\\Cke5Lang::getUserLang(); ?\u003e\" name=\"REX_INPUT_VALUE[1]\"\u003eREX_VALUE[1]\u003c/textarea\u003e\n```\n\n### Ausgabe-Code\n\n```html\nREX_VALUE[id=\"1\" output=\"html\"]\n```\n\nÜber weitere Data-Attribute kannst du die Minimal- und Maximalhöhe sowie die Sprache steuern:\n\n- data-max-height\n- data-min-height\n- data-lang\n\n### Verwendung in YForm\n\n- Im individuellen Attribute-Feld: ``` {\"class\":\"cke5-editor\",\"data-profile\":\"default\",\"data-lang\":\"de\"} ```\n- Weitere Attribute lassen sich durch Kommas trennen\n\n### Verwendung in MForm\n\n```php\n$mform = new MForm();\n$mform-\u003eaddTextAreaField(1,\n        array(\n        'label'=\u003e'Text',\n        'class'=\u003e'cke5-editor',\n        'data-lang'=\u003e\\Cke5\\Utils\\Cke5Lang::getUserLang(),\n        'data-profile'=\u003e'default')\n        );\necho $mform-\u003eshow();\n```\n\n### Verwendung mit MBlock\n\n```php\n$id = 1;\n$mform = new MForm();\n$mform-\u003eaddFieldset('Accordion');\n$mform-\u003eaddTextField(\"$id.0.titel\", array('label'=\u003e'Titel'));\n$mform-\u003eaddTextAreaField(\"$id.0.text\",\n        array(\n        'label'=\u003e'Text',\n        'class'=\u003e'cke5-editor',\n        'data-lang'=\u003e\\Cke5\\Utils\\Cke5Lang::getUserLang(),\n        'data-profile'=\u003e'default')\n        );\necho MBlock::show($id, $mform-\u003eshow());\n```\n\n## Eigene Schriften einbinden\n\n![Screenshot](https://raw.githubusercontent.com/FriendsOfREDAXO/cke5/assets/fonts.png)\n\nDamit die Schriften im Backend angezeigt werden, musst du sie als Assets laden.\nDas kannst du z.B. in der `boot.php` des Projekt-AddOns oder in der `backend.css` des Theme-AddOns machen.\nDie Schriften kommen in den Abschnitt *FontFamily* des Profil-Editors, in der gewohnten CSS-Schreibweise.\n\n## Sprog-Ersetzungen – kurz und knackig\n\nUnter `Mention \u0026 Sprog Ersetzungen` \u003e `Sprog Ersetzungen` \u003e `Ersetzungen` kannst du Sprog-Platzhalter mit Titel oder Beschreibung hinterlegen.\nSchreibweise: `{{key}}`. Im nächsten Feld kommt der Titel.\nIm Editor einfach '{{' eintippen, dann bekommst du eine Liste der Platzhalter.\n\n## Individualisierung – mach's zu deinem Editor\n\nDie 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.\n\n## CSS Content-Styles\n\n[Styleguide hier](https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/content-styles.html)\n\nDen 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.\n\nNach 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.\n\n## CKE im Frontend\n\n[Schau mal hier: REDAXO Tricks](https://friendsofredaxo.github.io/tricks/snippets/ckeditor_im_frontend)\n\n## Tastenkürzel\n\nHier die wichtigsten Tastenkürzel für CKEditor 5 und seine Features:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eAktion\u003c/th\u003e\n\t\t\t\u003cth\u003ePC\u003c/th\u003e\n\t\t\t\u003cth\u003eMac\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eKopieren\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003eStrg\u003c/kbd\u003e + \u003ckbd\u003eC\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003e⌘\u003c/kbd\u003e + \u003ckbd\u003eC\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eEinfügen\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003eStrg\u003c/kbd\u003e + \u003ckbd\u003eV\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003e⌘\u003c/kbd\u003e + \u003ckbd\u003eV\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eRückgängig\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003eStrg\u003c/kbd\u003e + \u003ckbd\u003eZ\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003e⌘\u003c/kbd\u003e + \u003ckbd\u003eZ\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eWiederherstellen\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003eStrg\u003c/kbd\u003e + \u003ckbd\u003eY\u003c/kbd\u003e \u003cbr\u003e \u003ckbd\u003eStrg\u003c/kbd\u003e + \u003ckbd\u003eUmschalt\u003c/kbd\u003e + \u003ckbd\u003eZ\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003e⌘\u003c/kbd\u003e + \u003ckbd\u003eY\u003c/kbd\u003e \u003cbr\u003e \u003ckbd\u003e⌘\u003c/kbd\u003e + \u003ckbd\u003eUmschalt\u003c/kbd\u003e + \u003ckbd\u003eZ\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eFett\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003eStrg\u003c/kbd\u003e + \u003ckbd\u003eB\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003e⌘\u003c/kbd\u003e + \u003ckbd\u003eB\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eKursiv\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003eStrg\u003c/kbd\u003e + \u003ckbd\u003eI\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003e⌘\u003c/kbd\u003e + \u003ckbd\u003eI\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eLink\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003eStrg\u003c/kbd\u003e + \u003ckbd\u003eK\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003e⌘\u003c/kbd\u003e + \u003ckbd\u003eK\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eHarter Zeilenumbruch (z.B. neuer Absatz)\u003c/td\u003e\n\t\t\t\u003ctd colspan=\"2\"\u003e\u003ckbd\u003eEnter\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eWeicher Zeilenumbruch (\u003ccode\u003e\u0026lt;br\u0026gt;\u003c/code\u003e)\u003c/td\u003e\n\t\t\t\u003ctd colspan=\"2\"\u003e\u003ckbd\u003eUmschalt\u003c/kbd\u003e + \u003ckbd\u003eEnter\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eAktuellen Listeneintrag einrücken (wenn man sich in einer Liste befindet)\u003c/td\u003e\n\t\t\t\u003ctd colspan=\"2\"\u003e\u003ckbd\u003eTab\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth colspan=\"3\"\u003eWenn ein Widget ausgewählt ist (z.B. Bild, Tabelle, horizontale Linie usw.)\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eNeuen Absatz direkt nach einem Widget einfügen\u003c/td\u003e\n\t\t\t\u003ctd colspan=\"2\"\u003e\u003ckbd\u003eEnter\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eNeuen Absatz direkt vor einem Widget einfügen\u003c/td\u003e\n\t\t\t\u003ctd colspan=\"2\"\u003e\u003ckbd\u003eUmschalt\u003c/kbd\u003e + \u003ckbd\u003eEnter\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eDen Cursor anzeigen, um direkt vor einem Widget schreiben zu können\u003c/td\u003e\n\t\t\t\u003ctd colspan=\"2\"\u003e\u003ckbd\u003e↑\u003c/kbd\u003e / \u003ckbd\u003e←\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eDen Cursor anzeigen, um direkt nach einem Widget schreiben zu können\u003c/td\u003e\n\t\t\t\u003ctd colspan=\"2\"\u003e\u003ckbd\u003e↓\u003c/kbd\u003e / \u003ckbd\u003e→\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth colspan=\"3\"\u003eIn einer Tabellenzelle\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eDie Auswahl zur nächsten Zelle verschieben\u003c/td\u003e\n\t\t\t\u003ctd colspan=\"2\"\u003e\u003ckbd\u003eTab\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eDie Auswahl zur vorherigen Zelle verschieben\u003c/td\u003e\n\t\t\t\u003ctd colspan=\"2\"\u003e\u003ckbd\u003eUmschalt\u003c/kbd\u003e + \u003ckbd\u003eTab\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eNeue Tabellenzeile einfügen (wenn man sich in der letzten Zelle einer Tabelle befindet)\u003c/td\u003e\n\t\t\t\u003ctd colspan=\"2\"\u003e\u003ckbd\u003eTab\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n        \u003ctr\u003e\n            \u003ctd\u003eDurch die Tabelle navigieren\u003c/td\u003e\n            \u003ctd colspan=\"2\"\u003e\u003ckbd\u003e↑\u003c/kbd\u003e / \u003ckbd\u003e→\u003c/kbd\u003e / \u003ckbd\u003e↓\u003c/kbd\u003e / \u003ckbd\u003e←\u003c/kbd\u003e\u003c/td\u003e\n        \u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n#### Benutzeroberfläche und Navigation\n\nMit diesen Tastenkürzeln navigierst du effizienter durch die CKEditor 5 Oberfläche:\n\n\u003ctable\u003e\n\t\u003cthead\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003cth\u003eAktion\u003c/th\u003e\n\t\t\t\u003cth\u003ePC\u003c/th\u003e\n\t\t\t\u003cth\u003eMac\u003c/th\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/thead\u003e\n\t\u003ctbody\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eKontext-Ballons und UI-Komponenten wie Dropdowns schließen\u003c/td\u003e\n\t\t\t\u003ctd colspan=\"2\"\u003e\u003ckbd\u003eEsc\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eFokus zum sichtbaren Kontext-Ballon verschieben\u003c/td\u003e\n\t\t\t\u003ctd colspan=\"2\"\u003e\u003ckbd\u003eTab\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eFokus zwischen Feldern (Eingabefelder und Buttons) in Kontext-Ballons verschieben\u003c/td\u003e\n\t\t\t\u003ctd colspan=\"2\"\u003e\u003ckbd\u003eTab\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eFokus zur Toolbar verschieben\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003eAlt\u003c/kbd\u003e + \u003ckbd\u003eF10\u003c/kbd\u003e\u003c/td\u003e\n\t\t\t\u003ctd\u003e\u003ckbd\u003eAlt\u003c/kbd\u003e + \u003ckbd\u003eF10\u003c/kbd\u003e \u003cbr\u003e (kann \u003ckbd\u003eFn\u003c/kbd\u003e erfordern)\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eDurch die Toolbar navigieren\u003c/td\u003e\n\t\t\t\u003ctd colspan=\"2\"\u003e\u003ckbd\u003e↑\u003c/kbd\u003e / \u003ckbd\u003e→\u003c/kbd\u003e / \u003ckbd\u003e↓\u003c/kbd\u003e / \u003ckbd\u003e←\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\t\u003ctr\u003e\n\t\t\t\u003ctd\u003eDie aktuell fokussierte Schaltfläche ausführen\u003c/td\u003e\n\t\t\t\u003ctd colspan=\"2\"\u003e\u003ckbd\u003eEnter\u003c/kbd\u003e\u003c/td\u003e\n\t\t\u003c/tr\u003e\n\t\u003c/tbody\u003e\n\u003c/table\u003e\n\n## Für Entwickler\n\n### Beispiel für Extra-Optionen\n\n```json\n{\n    \"removePlugins\": [\"Autoformat\"],\n    \"heading\": {\n        \"options\": [{\n                \"model\": \"paragraph\",\n                \"title\": \"Paragraph\",\n                \"class\": \"ck-heading_paragraph\"\n            },\n            {\n                \"model\": \"paragrap1tl\",\n                \"view\": {\n                    \"name\": \"span\",\n                    \"classes\": \"uk-text-large\"\n                },\n                \"title\": \"Fließtext groß\",\n                \"class\": \"ck-heading_paragraph\"\n            },\n            {\n                \"model\": \"heading1\",\n                \"view\": {\n                    \"name\": \"h1\",\n                    \"classes\": \"uk-animation-fade uk-heading-large\"\n                },\n                \"title\": \"Überschrift 1 sehr groß\",\n                \"class\": \"ck-heading_heading1\"\n            }\n\n        ]\n    }\n}\n```\n\n### Beispiel für benutzerdefinierte Link-Dekorator\n*Wichtig: Die Keys müssen klein geschrieben werden*\n\n```js\n[{\n    \"newtab\": {\n        \"mode\": \"manual\",\n        \"label\": \"In neuem Tab öffnen\",\n        \"attributes\": {\n            \"target\": \"_blank\",\n            \"rel\": \"noopener noreferrer\"\n        }\n    }\n}]\n```\n```js\n[{\n    \"arrowclass\": {\n        \"mode\": \"manual\",\n        \"label\": \"Link mit CSS Klasse\",\n        \"defaultValue\": \"true\",\n        \"classes\": \"arrow\"\n    }\n}]\n```\n\nOder mehrere:\n```js\n[{\n    \"openInNewTab\": {\n        \"mode\": \"manual\",\n        \"label\": \"In neuem Tab öffnen\",\n        \"defaultValue\": true,\n        \"attributes\": {\n            \"target\": \"_blank\",\n            \"rel\": \"noopener noreferrer\"\n        }\n    }\n},\n{\n    \"isGallery\": {\n        \"mode\": \"manual\",\n        \"label\": \"Gallery link\",\n        \"attributes\": {\n            \"class\": \"button light\",\n        }\n    }\n}]\n```\n\n### Mentions\n\nDas AddOn liefert das [Mentions-Plugin](https://ckeditor.com/docs/ckeditor5/latest/features/mentions.html) mit. Das kannst du frei konfigurieren.\nHier ein Beispiel:\n\n```json\n[{\n    \"marker\": \"@\",\n    \"feed\": [\n        \"@test\",\n        \"@test2\"\n    ],\n    \"minimumCharacters\": \"0\"\n}]\n```\n\n### YForm-Links\n\nUm generierte URLs wie `rex_news://1` zu ersetzen, füge das folgende Skript in die `boot.php` des `project` AddOns ein.\nDer Code für die URLs muss angepasst werden.\n\n```php\nrex_extension::register('OUTPUT_FILTER', function(\\rex_extension_point $ep) {\n    return preg_replace_callback(\n        '@((rex_news|rex_person))://(\\d+)(?:-(\\d+))?/?@i',\n        function ($matches) {\n            // table = $matches[1]\n            // id = $matches[3]\n            $url = '';\n            switch ($matches[1]) {\n                case 'news':\n                    // Beispiel, wenn die URLs via Url-AddOn generiert werden\n                    $id = $matches[3];\n                    if ($id) {\n                       return rex_getUrl('', '', ['news' =\u003e $id]);\n                    }\n                    break;\n                case 'person':\n                    // Ein anderes Beispiel\n                    $url = '/index.php?person='.$matches[3];\n                    break;\n            }\n            return $url;\n        },\n        $ep-\u003egetSubject()\n    );\n}, rex_extension::NORMAL);\n```\n\n### Profile API\n\nÜber die API kannst du eigene Profile abseits des Profileditors erstellen: `Cke5\\Creator\\Cke5ProfilesApi::addProfile`\n\nBeispiel:\n\n```php\n    $create = \\Cke5\\Creator\\Cke5ProfilesApi::addProfile(\n        'profile_name_cke5',\n        'API created Cke5 profile',\n        '{\n           \"toolbar\": [\"link\", \"rexImage\", \"|\", \"undo\", \"redo\", \"|\", \"selectAll\", \"insertTable\", \"code\", \"codeBlock\"],\n           \"removePlugins\": [\"Alignment\", \"Font\", \"FontFamily\", \"MediaEmbed\", \"Bold\", \"Italic\", \"BlockQuote\", \"Heading\", \"Alignment\", \"Highlight\", \"Strikethrough\", \"Underline\", \"Subscript\", \"Superscript\", \"Emoji\", \"RemoveFormat\", \"TodoList\", \"HorizontalLine\", \"PageBreak\"],\n           \"link\": {\"rexlink\": [\"internal\", \"media\"]},\n           \"image\": {\n             \"toolbar\": [\"imageTextAlternative\", \"|\", \"imageStyle:full\", \"imageStyle:alignLeft\", \"imageStyle:alignRight\", \"imageStyle:alignCenter\"],\n             \"styles\": [\"block\", \"alignLeft\", \"alignRight\", \"alignCenter\"]\n           },\n           \"table\": {\"toolbar\": [\"tableColumn\", \"tableRow\", \"mergeTableCells\", \"tableProperties\", \"tableCellProperties\"]},\n           \"rexImage\": {\"media_path\": \"\\/media\\/\"},\n           \"ckfinder\": {\"uploadUrl\": \".\\/index.php?cke5upload=1\u0026media_path=media\"},\n           \"placeholder_en\": \"Placeholder EN\",\n           \"placeholder_de\": \"Placeholder DE\",\n           \"codeBlock\": {\n             \"languages\": [{\"language\": \"plaintext\", \"label\": \"Plain text\", \"class\": \"\"}, {\n               \"language\": \"php\",\n               \"label\": \"PHP\",\n               \"class\": \"php-code\"\n             }]\n           }\n         }',\n        '[{\"min-height\": 100}, {\"max-height\": 280}]'\n    );\n    echo (is_string($create)) ? $create : 'successful profile created';\n```\n\n### HTML-Support\n\nSource-Editing Plugin hat ein Update bekommen.\nNach einem Update von einer sehr alten Version fehlt evtl. die Grundeinstellung für das PlugIn im Abschnitt HtmlSupport.\n\n```JSON\n[\n    {\n        \"name\": \"regex(/.*/)\",\n        \"attributes\": true,\n        \"classes\": true,\n        \"styles\": true\n    }\n]\n```\n\n### Autoformat deaktivieren\n\nDu kannst das Autoformat-Feature (Markdown-Code-Ersatz) deaktivieren, indem du diese Option in den Abschnitt Extra Options einfügst:\n\n```json\n{\"removePlugins\": [\"Autoformat\"]}\n```\n\n## Bugtracker\n\nFehler gefunden oder eine Idee? Erstelle ein [Issue](https://github.com/FriendsOfREDAXO/cke5/issues).\nBevor du ein neues Issue erstellst, such bitte, ob es schon ein ähnliches gibt. Und lies dir die [Issue Guidelines (englisch)](https://github.com/necolas/issue-guidelines) von [Nicolas Gallagher](https://github.com/necolas/) durch.\n\n## Changelog\n\nSchau mal im [CHANGELOG.md](https://github.com/FriendsOfREDAXO/cke5/blob/master/CHANGELOG.md) nach.\n\n## Lizenzen\n\nAddOn: [MIT LICENSE](https://github.com/FriendsOfREDAXO/cke5/blob/master/LICENSE)\nCKEDITOR: [GPL LICENSE](https://github.com/ckeditor/ckeditor5/blob/master/LICENSE.md)\n\n## Wer's gemacht hat\n\n**Friends Of REDAXO**\n\n* http://www.redaxo.org\n* https://github.com/FriendsOfREDAXO\n\n**Projektleitung**\n\n[Joachim Dörr](https://github.com/joachimdoerr)\n\n**Initiator:**\n\n[KLXM Crossmedia / Thomas Skerbis](https://klxm.de)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFriendsOfREDAXO%2Fcke5","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FFriendsOfREDAXO%2Fcke5","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FFriendsOfREDAXO%2Fcke5/lists"}